How can I create a shadow behind a border? - html

Question

I have a anchor containing a span element containing my text. The span element has these attributes
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
Now I want to create a shadow behind the border, but not the whole text. How would I do that without giving up on responsiveness?
.selected {
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 10px 10px 10px #59DFB8;
}
<div class="nav">
<ul>
<li><span class="selected">Home</span><span class="shadow"></span></li>
<li>Projects</li>
<li>About</li>
</ul>
</div>
Example:

Answer 1

The box-shadow property always uses its containing element's bounding box. You can't apply it to just part of an element, so you'll need to create an element specifically for the part that you want to have a shadow.
One solution would be to use pseudo-elements to create a child of the .selected element, and make that child look like an underline / bottom border. Then you can apply box-shadow to that.
Make your .selected element inline-block, so that its width is sized to its content. Then use the ::after pseudo-selector to create a block element inside of that, sized to the parent's width with a height of 5px and a solid background.
.selected {
/* so that its bounding box is only as wide as its contents */
display: inline-block;
}
.selected::after {
/* pseudo-elements must have content in order to render; give it a blank string */
content: '';
/* so it fills the parent horizontally */
display: block;
/* adjust to how tall you want the "bottom border" to be */
height: 5px;
/* color for the "bottom border" */
background: #59DFB8;
/* here's the shadow effect, adjust offsets and color as desired */
box-shadow: 10px 10px 10px #59DFB8;
}
Here is a full example, with simplified markup and some extra styles to make it look more like your example image.
ul {
list-style: none;
display: block;
background: #003447;
padding: 20px;
}
ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
ul li a {
font-family: Arial, sans-serif;
font-size: 20px;
color: #59DFB8;
text-decoration: none;
text-transform: uppercase;
}
ul li a::after {
content: '';
display: block;
margin-top: 5px;
height: 2px;
background: #59DFB8;
}
ul li a.selected::after {
box-shadow: 0px 0px 10px 1px #59DFB8;
}
ul li a:active::after,
ul li a:hover::after {
visibility: hidden;
}
ul li a.selected:active::after,
ul li a.selected:hover::after {
visibility: visible;
}
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
</ul>

Answer 2

You could do so with an :after or :before psudo-element.
.selected {
display: block;
float: left;
position: absolute;
width: 100%;
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 10px 10px 10px #59DFB8;
}
<div class="nav">
<ul>
<li><span class="selected">Home</span><span class="shadow"></span></li>
<li>Projects</li>
<li>About</li>
</ul>
</div>
I was going to expound but I see Woodrow beat me by a minute. ;p

Answer 3

Without seeing an example of how you want it to look I'm having to guess. The approach may depend on how subtle an effect you're going for. Here i've added a box shadow with a negative spread and semi-transparent fill:
a{text-decoration:none; color:#555;}
a:hover, a.active {
color:#000;
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 0 8px 10px -8px hsl(0, 0%, 40%);
}
.nav ul {margin:0; padding:0; display:flex;}
.nav li {margin:15px; list-style-type:none;}
<div class="nav">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>A Long One</li>
</ul>
</div>