Как я могу изменить цвет моего текста без использования атрибута цвета? (HTML и CSS)

На моем веб-сайте я использовал настраиваемый шаблон для панели навигации. То, что я хочу сделать, это изменить цвет подчеркивания текста, а не изменить фактический цвет текста (и, как вы знаете, функция подчеркивания и текст должны быть в одном и том же селекторе. Теперь вы можете подумать, просто сделай вертикальную линейку и раскрась ее!Дело в том,что я не знаю расстояние между подчеркиванием и частью текста.Есть ли способ раскрасить текст другим цветом от подчеркивания?Спасибо!

Скриншоты:

Ввод кода: 1
Результат: 2


text colors html css underline
person Ryanplays Games    schedule 29.10.2015    source источник
comment
Трудно помочь вам без кода...   -  person Devin    schedule 29.10.2015
comment
как вы утверждаете, цвета подчеркивания и текста должны совпадать, поскольку они являются одним и тем же (подчеркивание - это украшение текста). Возможно, вы могли бы сымитировать его, наложив дублирующийся текст друг на друга, при этом верхний слой не был бы подчеркнут, но теперь при этом мы возимся с контентом и проблемами доступности.   -  person DA.    schedule 29.10.2015
comment
Ссылка ведет на PNG.   -  person Devin    schedule 29.10.2015
comment
Но спасибо за предложение! :Д-ДА   -  person Ryanplays Games    schedule 29.10.2015
comment
stackoverflow.com/questions/12804419/< /а>   -  person Shockwave    schedule 29.10.2015
comment
подожди, я все испортил, лел   -  person Ryanplays Games    schedule 29.10.2015
comment
Хорошо, я посмотрел на ваш файл PNG, это не совсем подчеркивание текста. Похоже, вы добавляете границу к контейнеру?   -  person DA.    schedule 29.10.2015
comment
да да...................   -  person Ryanplays Games    schedule 29.10.2015

Ответы (4)


arrow_upward
1
arrow_downward

Вы не можете изолировать цвет подчеркивания и управлять им отдельно от цвета текста; он наследует тот же цвет от текста.

Однако вместо этого вы можете использовать границу.

nav a {
    color: white
    text-decoration: none;
    border-bottom: 1px solid salmon;
    background-color: salmon;
}

nav a.active {
    color: #333;
    border-bottom: 1px solid #333;
}
person paceaux    schedule 29.10.2015

arrow_upward
3
arrow_downward

Одним из решений было бы «подделка» подчеркивания нижней границей. Это может не работать в зависимости от структуры вашего HTML, но что-то вроде этого:

text-decoration: none;
border-bottom: 1px solid #FF0000;
person Pedro M. Silva    schedule 29.10.2015

arrow_upward
0
arrow_downward

Используйте встроенный блок в качестве отображаемого значения для каждой ссылки и примените нижнюю границу:

ul li a{
  display:inline-block;
  border-bottom:2px solid #eeeeee;
  float:left;
  padding: 10px;
  background-color:red;
  color:#ffffff;
  text-decoration:none;

}

измените отступы, цвет фона и цвет шрифта в соответствии с вашим стилем.

person Shah Ghafoori    schedule 29.10.2015

arrow_upward
0
arrow_downward

Это еще одно решение. Наведите указатель мыши на элемент!

ul{
  margin: 0;
  padding: 0;
}
ul li a{
    
    height: 50px;
    position: relative;
    padding: 0px 15px;
    display: table-cell;
    vertical-align: middle;
    background: salmon;
    color: black;
    font-weight: bold;
    text-decoration: none;
}
ul li a:hover:after{
    display: block;
    content: '\0020';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 3.5px;
    background: #000000;
  
    z-index: 9;
}
<ul>
  <li><a href='#'>Menu Item</a></li>
</ul>

person Gacci    schedule 29.10.2015
comment
Дело в том, что я хочу, чтобы он анимировался. Мой шаблон поставляется с анимацией. Если бы я заменил часть моего шаблона этим, шаблон не анимировался бы. И нет никакого способа заставить его анимироваться. Спасибо за предложение! :-Д - person Ryanplays Games; 29.10.2015
comment
Я не прошу вас заменить его этим, я привожу вам пример. Вы не предоставили код (ну одну строчку). - person Gacci; 29.10.2015