I have a button which already uses an ::after element (underneath) , but I want to add a shape/element to the right side of the div.
a {
position: relative;
display: inline-block;
padding: 15px 10px;
margin: 0 5px;
color: #222;
font-size: 0.9em;
font-weight: 700;
}
a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px;
width: 0;
bottom: 6px;
left: 0;
right: 0;
}
a.btn-contact::before {
background: #0c0;
content: '';
display: inline-block;
float: left;
height: 10px;
width: 10px;
position: absolute;
right: 0;
top: 0;
}
button
I got it to the right of the link, but I want it to vertically align on the right
EDIT: full css/html provided. Wordpress site with .btn-contact class applied to just one button (the one I want the shape beside)
i changed a bit the html you provided ( guessing that it's what you want )
do not use float to absolute elements. it doesn't have any effect.
use top:50% which means half of li a height ( the item with position relative ) and also transform:translateY(-50%) which moves up :before width half of it's height.
these 2 styles together vertical-align in the middle the before pseudo-element
check snippet below and let me know if this is what you were looking for
li a {
position: relative;
display: inline-block;
padding: 15px 10px;
margin: 0 5px;
color: #222;
font-size: 0.9em;
font-weight: 700;
}
li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px;
width: 0;
bottom: 6px;
left: 0;
right: 0;
}
li.btn-contact a::before {
background: #0c0;
content: '';
display: inline-block;
height: 10px;
width: 10px;
position: absolute;
right: 0;
top: 50%;
transform:translateY(-50%)
}
<li class="btn-contact">button</li>
Related
I have css:
.custom-select::after {
content: "˅";
padding: 12px 8px;
position: absolute;
right: 20px;
top: 8px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
}
It creates an arrow:
arrow
i want to make It wider. How can I do this with only css?
simply change ˅ with ﹀.
.custom-select::after {
content: "﹀";
padding: 12px 8px;
position: absolute;
right: 20px;
top: 8px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
}
Another answer using css transform scale property
transform: scale(2,1);
/* Change the scale as needed*/
Where the first parameter is the horizontal stretch and the second parameter is the vertical stretch.
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 :)
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 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>
I want to show three horizontal dots (I've made a demo on jsfiddle)
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -10px;
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
span:after {
position: absolute;
right: 0;
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
I don't know if this is the best way to achieve this. Also, I want them to line-up horizontally. And I don't understand why they aren't. Any suggestion how to fix this ?
Since you are using absolute positioning, you could use top property to position the pseudo generated contents vertically, and play with left property for horizontal alignment
Example Here
span:before {
position: absolute;
left: -20px; /* <-- align the circle horizontally */
top: 0; /* <-- Added declaration */
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
span:after {
position: absolute;
left: 20px; /* <-- align the circle horizontally */
top: 0; /* <-- Added declaration */
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
In this case there's no need to use margin of the pseudo-elements.
Additionally, you could avoid negative values for left property to make the circles appear in the right. (Example Here).
//using left instead of right in after
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -10px;
content: '';
top: 0;
background-color: green;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
span:after {
position: absolute;
left: 10px; //using left instead of right
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
top: 0;
padding: 5px;
}
Check this jsFiddle
HTML
<span></span>
CSS
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -20px;
top: 0;
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
span:after {
position: absolute;
left: 20px;
top: 0;
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
padding: 5px;
}