In this way, the last statement will be the only one visible due to the css cascade.
Isn't there an alternative way to have all three pseudo-elements in the same container?
div class="container"</div>
.container {
position: relative;
}
.container:after {
position: absolute;
content: "some text";
top: 10%;
left: 20%;
}
.container:after {
position: absolute;
content: "";
border: 5px solid yellow;
width: 50%;
top: 10%;
left: 20%;
}
.container:after {
position: absolute;
content: "";
border: 5px solid blue;
width: 60%;
top: 30%;
left: 50%;
}
As it is not possible to have multiple before or after pseudo elements on one element, this snippet takes a different approach to placing the yellow and blue underlines.
They are drawn using CSS background-image with two linear-gradients on one pseudo element. Each is sized and positioned appropriately.
The snippet produces this:
body {
width: 100vw;
display: flex;
justify-content: center;
}
.container {
--h: 0.5em;
/* set this to the height of each underline */
font-family: sans-serif;
font-size: 36px;
text-align: center;
position: relative;
display: inline-block;
}
.container::before {
content: '';
position: absolute;
width: 300%;
height: 2em;
left: 50%;
transform: translateX(-50%);
background-image: linear-gradient(#ffff66, #ffff66), linear-gradient(cornflowerblue, cornflowerblue);
background-size: 95% var(--h);
background-position: left 0.75em, right 1em;
background-repeat: no-repeat;
z-index: -1;
}
<div class="container">Some text</div>
Obviously you will want to set the various dimensions to suit your particular case.
Related
I'm trying to create a component where there is a hollow circle that is cropped at the bottom-left corner:
I've attempted to do so with the pseudo classes below but am facing two issues after working with it for a while (dimensions of the circle are not the same, but I will address this later):
The circles overflow outside of the component
The positioning of the circles changes depending on where the element is used.
#element {
max-width: 750px;
height: 350px;
border-radius: 8px;
background-color: #008001;
}
#element:before {
content: '';
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
background: #008001;
border-radius: 50%;
top: 290px;
right: 94%;
}
#element:after {
content: '';
position: absolute;
width: 150px;
height: 150px;
background: #fff;
opacity: 0.5;
border-radius: 50%;
top: 260px;
right: 92%;
}
<div id="element"></div>
Set overflow:hidden to #element. SO `we can hide overflowing content of ::before CSS. Also set #element to position:relative, which set's boundary for ::before when we try to set it after making it absolute.
Once above =e things are done, just apply #element::before to bottom:-50px and left:-50px, I have used 50px as height and width were set to 100px.
Then to get the border just set border:25px solid #yourolor.
#element {
max-width: 750px;
height: 350px;
border-radius: 8px;
background-color: #008001;
overflow: hidden;
position: relative;
}
#element:before {
content: '';
position: absolute;
width: 100px;
height: 100px;
z-index: 4;
background: #008001;
bottom: -50px;
left: -50px;
border-radius: 100%;
border: 25px solid #c5ffc6;
}
<div id="element"></div>
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
I need to draw 2 circle connected with css so that i will use flight search website if you can let me get you answer this is what i want
pure css or materializecss thanks
This is the general idea using a single element and pseudo elements for the circles. Position them over the line, and use a background color in the circle that matches the background of the page
body {
padding: 2em;
}
div {
background: blue;
height: 1px;
position: relative;
}
div:before, div:after {
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
content: '';
height: 1em; width: 1em;
border: 1px solid blue;
border-radius: 50%;
background: #fff;
}
div:after {
left: auto;
right: 0;
}
<div></div>
Or you can position the circles outside of the parent element instead of using a background image.
body {
padding: 2em;
}
div {
background: blue;
height: 1px;
position: relative;
}
div:before, div:after {
position: absolute;
top: 50%; left: 0;
transform: translate(-100%,-50%);
content: '';
height: 1em; width: 1em;
border: 1px solid blue;
border-radius: 50%;
}
div:after {
left: auto;
right: 0;
transform: translate(100%,-50%);
}
<div></div>
I was wondering if it's possible to position the z-index of a :after-pseudo element so that it's behind a link's text. For example;
HTML
Here's a link
SCSS
a {
background: #666:
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
&:before {
/* this is occupied */
}
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0; left: 0;
background: #000;
}
}
What I'm trying to achieve here is to display the link's text. This is currently not happening because the :after element is overlapping it. I'd like to put the text to the front without using something like a <span> tag. Note: it should overlap its original background, but not the text.
Is there a way to achieve this, or is this simply impossible?
I found a proper solution. I'll use a box-shadow: inset 0 -3.125rem 0 #000; on the element instead. This way I don't have to use the :after element.
Thank you all for the comments.
You just need to add z-index:-1; to the :after-pseudo
a {
background: #666:
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
}
a:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0; left: 0;
background: #000;
z-index:-1;
}
Here's a link
https://jsfiddle.net/d8htv6a9/
It's as easy as setting the z-index: -1; for the :after pseudo-element.
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1; /* Set this */
background: #000;
}
Here's a JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/
EDIT:
Based on your comment, there is one trick you could use but I don't know if it will go along your animation. You could use a title attribute in the HTML itself and use it as the content of the :after pseudo-element.
a {
position: relative;
background: #666;
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
z-index: 1;
}
a:after {
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
background: #000;
color: white;
text-align: center;
}
Here's a link
Then you can perhaps fade it in/out or whatever you prefer.
Here's a new JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/
I am trying to achieve the following, with pure CSS and no images:
As you can see, its a heading with a line afterwards. The problem is, that the line should has 2 different colors and more important, 2 different heights.
The first parts color is orange, has a height of 3px and a fixed width of 100px (padding-left: 15px)
The sedond parts color is #E1E1E1 and should fill the rest of the line.
My first try was this:
<h1><span>OUR ARTICLES</span></h1>
<style>
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
border-left: 100px solid orange;
left: 100%;
margin-left: 15px;
}
</style>
See http://jsfiddle.net/oyxmxoLs/
But as you can see, I can't make the orange part thicker than the grey one.
Any ideas?
Another way: Flexbox
With display: flex you don't have to give the line a certain width and you can make sure it is always responsive.
We are going here with an progressive enhancement approach. We'll make a cut after IE8 by using ::before instead of :before. In IE9 only the grey line will be shown (underneath the title).
h1 {
align-items: center;
color: #444;
display: flex;
font: 18px/1.3 sans-serif;
margin: 18px 15px;
white-space: nowrap;
}
h1::before {
background-color: orange;
content: "";
height: 4px;
margin-left: 10px;
order: 2;
width: 100px;
}
h1::after {
background-color: #E1E1E1;
content: "";
display: block;
height: 2px;
order: 3;
width: 100%;
}
<h1>Our articles</h1>
Do not forget to add vendor-prefixes!
You can solve this by using :before and :after
http://jsfiddle.net/oyxmxoLs/1/
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:before {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
left: 100%;
margin-left: 15px;
}
h1 span:after {
content: "";
position: absolute;
height: 3px;
top: 45%;
width: 100px;
background: orange;
left: 100%;
margin-left: 15px;
margin-top:-1px;
}
<h1><span>OUR ARTICLES</span></h1>
You can also use the :before pseudo-element to add the orange line.
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after, h1 span:before {
content: "";
position: absolute;
height: 1px;
left: 100%;
top: 45%;
margin-left: 15px;
}
h1 span:after {
width: 999px;
background: #E1E1E1;
}
h1 span:before {
height: 3px;
z-index: 1;
margin-top: -1px;
border-radius: 2px;
width: 100px;
background: orange;
}
<h1><span>OUR ARTICLES</span></h1>