How to stop the text shadow applied to the text design?

Question

In CSS can you stop text-shadowapplying to text-decoration?

I have a menu system that requires a text shadow on the first letter of the word (since the client requested a lighter (white) background). When you hover over the link; used text-decoration, which works fine, but now that there is an element text-shadow, this also applies text-decoration.

Is there a way around this so that the text shadow applies only to the text, and not to excessive decorations?

The code:

nav > a {
    display: block;
    vertical-align: top !important;
    background:url('/images/menu-log60.png') no-repeat left;
    padding:22px 0 22px 25px;
    padding:calc(30px - 0.5em) 0 calc(30px - 0.5em) 25px;
    margin-bottom:10px;
}
nav a {
    text-decoration:none;
    color: #000;
    display: block;
}
nav a > strong {
    color: #ffe100;
}
nav #orderingSubMenu a >strong {
    text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
}
nav a:hover, nav a:focus {
    text-decoration:underline;
}

<nav>
  <span id="orderingSubMenu">
      <a href="/#"><strong>P</strong>rices - Loose</a>
      <a href="/#"><strong>P</strong>rices - Bags</a>
      <a href="/#"><strong>A</strong>ccount Details</a>
      <a href="/#"><strong>L</strong>og Out</a>
  </span>
</nav>

Run codeHide result

/*** Current work around ***/
nav #orderingSubMenu a:hover > strong,
nav #orderingSubMenu a:focus > strong {
     text-shadow: none;
 }

I did not find a method for this and I do not suspect that this cannot be done due to text-CSS rules that apply equally to all parts text-(e.g., -decorationetc.).

Current setting:

:

Soluton:

:

, ?

1: Border-bottom

CBroe Michael_B Border-bottom , CSS ( , MCVE) , , , .

, CSS, ( , ? , , + , CSS...), , .

2: span s

myf, spans ; , text-shadow , , , , ....

Myf. .

3: :

; , :first-letter ;

nav #orderingSubMenu a:first-letter:hover, nav #orderingSubMenu a:first-letter:focus {
    text-decoration: none;
    border-bottom: 1px solid #721006;
    padding-right: 0;
}

; "" . ( , , , Javascript , ....

Answer 1

:

nav a {
    text-decoration:none;
    color: #000;
    display: block;
}
nav span {
 border-bottom: 1px solid transparent;
}
nav a strong {
    color: #ffe100;
}
nav #orderingSubMenu a strong {
    text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
}
nav a:hover span, nav a:focus span {
 border-color: black;
}

<nav>
  <span id="orderingSubMenu">
      <a href="/#"><span><strong>P</strong>rices - Loose</span></a>
      <a href="/#"><span><strong>P</strong>rices - Bags</span></a>
      <a href="/#"><span><strong>A</strong>ccount Details</span></a>
      <a href="/#"><span><strong>L</strong>og Out</span></a>
  </span>
</nav>

Hide result

Answer 2

text-decoration border-bottom.

nav > a {
    display: block;
    vertical-align: top !important;
    background:url('/images/menu-log60.png') no-repeat left;
    padding:22px 0 22px 25px;
    padding:calc(30px - 0.5em) 0 calc(30px - 0.5em) 25px;
    margin-bottom:10px;
}
nav a {
    text-decoration:none;
    color: #000;
    display: block;
    border-bottom: 1px solid transparent; /* prevents box shifting on hover
                                             (by factoring in the border width) */
}
nav a > strong {
    color: #ffe100;
}
nav #orderingSubMenu a >strong {
    text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
}
nav a:hover, nav a:focus {
    /* text-decoration:underline; */
    border-bottom: 1px solid black;
    display: inline-block;
    
}

<nav>
    <span id="orderingSubMenu">
        <a href="/#"><strong>P</strong>rices - Loose</a>
        <a href="/#"><strong>P</strong>rices - Bags</a>
        <a href="/#"><strong>A</strong>ccount Details</a>
        <a href="/#"><strong>L</strong>og Out</a>
    </span>
</nav>

Hide result

Answer 3

, , , , .

nav > a {
        display: block;
        vertical-align: top !important;
        background:url('/images/menu-log60.png') no-repeat left;
        padding:22px 0 22px 25px;
        padding:calc(30px - 0.5em) 0 calc(30px - 0.5em) 25px;
        margin-bottom:10px;
    }
    nav a {
        text-decoration:none;
        color: #000;
        display: block;
        position: relative;
    }
    nav a > strong {
        color: #ffe100;
    }
    nav #orderingSubMenu a >strong {
        text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
    }
    
    nav a:hover, nav a:focus {
        text-decoration:underline;
    }
    nav a:hover::before, nav a:focus::before {
        content: " ";
        position: absolute;
        bottom: 1px;
        min-width: 11px;
        min-height: 1px;
        background: #fff;
        display: inline-block;
    }
    nav a:hover::after, nav a:focus::after {
        content: " ";
        position: absolute;
        bottom: 3px;
        left: 0;
        min-width: 11px;
        min-height: 1px;
        background: #fff;
        display: inline-block;
    }

<nav>
      <span id="orderingSubMenu">
          <a href="/#"><strong>P</strong>rices - Loose</a>
          <a href="/#"><strong>P</strong>rices - Bags</a>
          <a href="/#"><strong>A</strong>ccount Details</a>
          <a href="/#"><strong>L</strong>og Out</a>
      </span>
    </nav>

Hide result

Answer 4

• "text-decoration: underline" to strong elm
• ,
• ( ) , ()

1 .

strong { display:inline-block; opacity:1 }

2, , , . , , 2/3- , (1/3- )

a:before { content:'\002004\002004' }

3 text-indent, -2/3em .

strong { text-indent:-0.667em }