I want to drop lined shadow on a link or button. Kind of flat style. You can see this implemented already here
a.button {
position: relative;
z-index: 2;
display: inline-block;
padding: 10px;
text-decoration: none;
color: #fff;
font-family: arial;
}
a.button:before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
right: 0px;
bottom: 0;
border: 3px solid #000;
}
a.button:after {
content: "";
display: block;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
background-color: red;
border: 3px solid red;
right: -6px;
bottom: -6px;
}
a.button:hover:after {
background-color: green;
border: 3px solid green;
}
Click Here
But the problem is that the box and the shadow are overlapping on the button text so the button text is not visible. Is there any way to fix that? I don't want to add any extra html tags like span into this as the links are going to be auto generated using Wordpress. So that is why I have used before-after pseudo css.
Set :after z-index to -1. to send it backward futher
a.button:after {
z-index: -1;
}
Related
I want the hover effect (background change of pseudo-element to green) to only appear when the button is being hovered, however it also appears when the pseudo-element (green box) is hovered on.
button {
box-sizing: border-box;
background-color: blue;
padding: 10px 20px;
color: white;
position: relative;
}
button::before {
content: '';
position: absolute;
background-color: transparent;
height: 20px;
width: 100%;
left: 0;
bottom: -30px;
}
button:hover::before {
background-color: green;
}
<button>
I am a button
</button>
#nad by adding pointer-events: none; you can prevents all click and cursor events.
button {
box-sizing: border-box;
background-color: blue;
padding: 10px 20px;
color: white;
position: relative;
}
button::before {
content: '';
position: absolute;
background-color: transparent;
height: 20px;
width: 100%;
left: 0;
bottom: -30px;
pointer-events: none;
}
button:hover::before {
background-color: green;
}
<button>
I am a button
</button>
You can achieve that by first setting the default state of the pseudo-element to hidden by setting the display property to display: none;.
On the hover event of the button element you can make it visible by updating the display property to display: block;
But if you loose mouse over from the button element it will be hidden again.
Hope this is not for some kind of drop-down menu, if so, this is not how you should go about doing it.
button {
box-sizing: border-box;
background-color: blue;
padding: 10px 20px;
color: white;
position: relative;
}
button::before {
content: '';
position: absolute;
background-color: transparent;
height: 20px;
width: 100%;
left: 0;
bottom: -30px;
display: none;
}
button:hover::before {
background-color: green;
display: block;
}
<button>
I am a button
</button>
I'm trying to draw additional (mock) buttons onto my page with plain CSS, but my span element is not showing up. I've tried giving it a display: block; and I've also tried positioning it absolutely, but nothing seems to work. And out of those two ways, which is the preferred/most clear method?
header {
position: relative;
display: flex;
justify-content: space-around;
border-bottom: 6px solid black;
padding: 15px 0 10px 0;
}
img {
width: 43px;
height: 43px;
}
.red-button {
background: yellow;
width: 50px;
height: 50px;
}
header:before {
content: "";
position: absolute;
z-index: 1;
top: 74px;
width: 100%;
border-bottom: 6px solid maroon;
}
header:after {
content: "";
position: absolute;
top: 0;
width: 100%;
border-bottom: 6px solid $light-red;
}
<body>
<header>
<img src="./assets/pokeball.svg" alt="pokedex">
<span className="red-button"></span>
</header>
</body>
Just try to replace className by class.
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/
This question already has an answer here:
Achieving this hr element with CSS styling - pseudo elements
(1 answer)
Closed 6 years ago.
I'm attempting to style an hr tag to have end caps like the attached image. While I could just remove the background from that image and set that as background, that won't change width with the page. At the moment, how to get this correctly made is eluding me.
Image of the desired hr.
Here you go. https://jsfiddle.net/mkarajohn/sfr5kw4e/
hr {
height: 4px;
background: black;
border: none;
position: relative
}
hr::before,
hr::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
border-radius: 100px;
background: black;
bottom: -4px;
}
hr::before {
left: 0;
}
hr::after {
right: 0;
}
Think if you really need an hr though, instead of a simple div
You could use before, after pseudo elements. Something like:
hr:before {
content: "";
position: absolute;
display: block;
width: 6px;
height: 6px;
background-color: blue;
top: 6px;
left: 6px;
border-radius: 50%;
}
See this codepen http://codepen.io/anon/pen/dMpJXR
Use before and after pseudo classes:
Key to styling an <hr> is also to replace the embossed line with a border. The round endcaps are done by rendering before and after blocks with a border-radius that makes them circles:
hr {
border: 0 solid black;
border-top-width: 3px;
height: 0;
margin-top: 10px;
margin-bottom: 60px;
float: left;
clear: both;
display: block;
width: 100%;
position: relative;
}
hr:before, hr:after {
content: " ";
width: 10px;
height: 10px;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid black;
background-color: black;
}
hr:before {
left: 0;
bottom: -4px;
}
hr:after {
bottom: -4px;
right: 0;
}
Here's a JSBin
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>