I'm working on a large project where I have to target the keyboard focus states of buttons and links throughout a website. It's a very large site, and there are many years of links created.
I've managed to target buttons and a specific animated link (see example with keyboard navigation), but I can't seem to target the other links or the ul > li > a links.
How do I target these other links?
/* Duru Sans */
@import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 60vh;
}
a {
text-decoration: none;
}
a.nextiva-bttn-anim {
align-items: center;
border: 0;
border-radius: 4px;
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
cursor: pointer;
display: inline-flex;
font-size: 1.062rem;
font-weight: 700;
justify-content: center;
min-width: 185px;
outline: 0;
padding: 1.25rem 0;
position: relative;
text-transform: none;
transition: all 0.2s ease;
}
a.nextiva-bttn-anim:hover {
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
}
a.nextiva-bttn-anim:before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 0.2s ease;
border-radius: 4px;
filter: blur(4px);
}
a.nextiva-bttn-anim:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
a.nextiva-blue-bttn {
background: #005fec;
color: white;
}
a.white {
background: white;
color: #005fec;
}
a.nextiva-bttn-anim .bttn-txt {
color: inherit;
font-weight: inherit;
display: inline-block;
transform: translateX(0.625rem);
transition: transform 0.2s;
}
a.nextiva-bttn-anim .learn-more-arrow {
height: 0.75rem;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
a.nextiva-bttn-anim:hover .bttn-txt {
transform: translate(0px);
transition: transform 0.2s;
margin-right: 0.3rem;
}
a.nextiva-bttn-anim:hover .learn-more-arrow {
opacity: 1;
transition: opacity 0.2s, transform 0.2s;
}
.txt-link a::before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 0.2s ease;
border-radius: 4px;
filter: blur(4px);
}
*:focus {
outline: none;
}
.txt-link a:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
.txt-link a:focus-visible:before {
left: -4px;
right: -4px;
}
.txt-link {
display: inline-flex;
font-size: 1.25rem;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.25rem;
position: relative;
text-decoration: none;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
} <div class="container">
<a class="nextiva-bttn-anim nextiva-blue-bttn light" href="#">
<span class="bttn-txt">Small business</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
</a>
<span class="txt-link arrow-link">
<a href="#">See all-in-one</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
<a href="#" class="link-ct">Learn more</a>
<div class="lnks">
<ul class="company">
<li><a href="#">Hello</a></li>
</ul>
</div>
<a class="nextiva-bttn-anim white" href="#">
<span class="bttn-txt">Enterprise</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" alt="right arrow icon" class="learn-more-arrow" loading="lazy">
</a>
</div>You can try omitting the ::before psuedo selector and then it works:
/* Duru Sans */
@import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 60vh;
}
a {
text-decoration: none;
}
a.nextiva-bttn-anim {
align-items: center;
border: 0;
border-radius: 4px;
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
cursor: pointer;
display: inline-flex;
font-size: 1.062rem;
font-weight: 700;
justify-content: center;
min-width: 185px;
outline: 0;
padding: 1.25rem 0;
position: relative;
text-transform: none;
transition: all 0.2s ease;
}
a.nextiva-bttn-anim:hover {
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
}
a.nextiva-bttn-anim:before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 0.2s ease;
border-radius: 4px;
filter: blur(4px);
}
a.nextiva-bttn-anim:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
a.nextiva-blue-bttn {
background: #005fec;
color: white;
}
a.white {
background: white;
color: #005fec;
}
a.nextiva-bttn-anim .bttn-txt {
color: inherit;
font-weight: inherit;
display: inline-block;
transform: translateX(0.625rem);
transition: transform 0.2s;
}
a.nextiva-bttn-anim .learn-more-arrow {
height: 0.75rem;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
a.nextiva-bttn-anim:hover .bttn-txt {
transform: translate(0px);
transition: transform 0.2s;
margin-right: 0.3rem;
}
a.nextiva-bttn-anim:hover .learn-more-arrow {
opacity: 1;
transition: opacity 0.2s, transform 0.2s;
}
.txt-link a::before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 0.2s ease;
border-radius: 4px;
filter: blur(4px);
}
*:focus {
outline: none;
}
.txt-link a:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
.txt-link a:focus-visible:before {
left: -4px;
right: -4px;
}
.txt-link {
display: inline-flex;
font-size: 1.25rem;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.25rem;
position: relative;
text-decoration: none;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
}
ul li a:focus-visible{
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
border-radius: 4px;
transition: all 0.2s ease;
}<div class="container">
<a class="nextiva-bttn-anim nextiva-blue-bttn light" href="#">
<span class="bttn-txt">Small business</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
</a>
<span class="txt-link arrow-link">
<a href="#">See all-in-one</a>
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
<a href="#" class="link-ct">Learn more</a>
<div class="lnks">
<ul class="company">
<li><a href="#">Hello</a></li>
</ul>
</div>
<a class="nextiva-bttn-anim white" href="#">
<span class="bttn-txt">Enterprise</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" alt="right arrow icon" class="learn-more-arrow" loading="lazy">
</a>
</div>