Несколько оттенков подчеркивания в одном якоре

Я хотел бы, в пределах одного якоря </a>, иметь два разных цвета подчеркивания. Например:

<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

Я могу добавить text-decoration в каждый диапазон при наведении, но это заставляет каждую линию зависать индивидуально. Я хочу это так, чтобы, когда я навешивался где-нибудь в </a>, оба пробела подчеркивают свой шрифт color унаследованный.

Возможно ли это?

Примечание. Я знаю text-decoration-color, но из-за поддержки ограничения я не могу его использовать.

Ответ 1

Что-то вроде этого? Вы можете использовать псевдо-класс anchor :hover CSS, чтобы создать его дочерний и потоковый.

Вот ссылка на CSS child и descendant.

a {
  color: black;
  text-decoration: none;
}
a span:first-child {
  color: red;
}
a span:last-child {
  color: grey;
}
a:hover span {
  text-decoration: underline;
}

<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>

Ответ 2

Вы пробовали это?

a:hover span {
   text-decoration: underline; }

text-decoration: underline автоматически наследует цвет шрифта, поэтому, если ваши интервалы уже имеют серый/красный цвет, все, что вам нужно сделать, это подчеркнуть их при наведении a

Ответ 3

Вы также можете попробовать это. если существует так много элементов span

a{
  text-decoration:none;
}
a:hover span:nth-child(1){
  border-bottom:1px solid red;
}
a:hover span:nth-child(2){
  border-bottom:1px solid grey;
}

<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

Ответ 4

Попробуйте это

a{
	text-decoration:none;
}
a:hover #span1{
text-decoration: none;
border-bottom: 1px solid red;
}
a:hover #span2{
text-decoration: none;
border-bottom: 1px solid grey;
}

<a href="somehref">
    <span id="span1">This text should underline RED on `a` hover</span><br/>
    <span id="span2">This text should underline GREY on `a` hover</span>
</a>

Ответ 5

Я добавил это, чтобы наследовать цвет пролета, который вам нужен, а не использовать HEX в подчеркивании. Обратите внимание, что это SCSS.

Цветовой модуль CSS - 4.4. ключевое слово currentColor

CSS1 и CSS2 определяют начальное значение свойства border-color для значения свойства цвета, но не определяет соответствующее ключевое слово. Это упущение было признано SVG, и, таким образом, SVG 1.0 ввел значение currentColor для заливки, стоп-цвета, цвета заливки и цвета подсветки.

CSS3 расширяет значение цвета для включения ключевого слова currentColor. разрешить его использование со всеми свойствами, которые принимают значение. Эта упрощает определение этих свойств в CSS3.

Скриншот для вас

https://jsfiddle.net/4f0mL136/3/

<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>

a {
  text-decoration: none;
}

span:last-child {
  color: black;
}

span:first-child {
  color: red;
}

a:hover {
  span {
    border-bottom: 1px solid currentColor;
  }
}

span {  // display purposes
  display: block;
  border-bottom: 1px solid transparent;
  margin-bottom: 10px;
  transition: border-bottom .2s ease-in;
}

Ответ 6

есть несколько способов сделать это лучший способ - создать класс (в CSS) и установить цвет там второй способ - вставить CSS в html-код как здесь

.tool1:hover {
    background-color:red;
}
.tool2:hover {
    background-color:grey;
}

<!DOCTYPE html>
<html>
    <style>
    </style>
     
    <body style="text-align:center;">

        <p>Move the mouse over the text below:</p>

        <a href="somehref">
            <span class='tool1'>This text should underline RED on `a` hover</span>
            <span class='tool2'>This text should underline GREY on `a` hover</span>
        </a>

    </body>
</html>