CSS - несколько текстовых украшений со стилем и цветом

Я хочу создать текст с red wavy underline и blue dashed overline, используя text-decoration.
Вот мой код: (работает только в Mozilla Firefox) (не работает, потому что отображается только поверх линии)

span {
  font-size: 40px;
  text-decoration: underline wavy red;
  text-decoration: overline dashed blue;
}
<span> Some Text </span>

How can I do that effect using only text-decoration? (I know, it will work only in Mozilla Firefox)
Thanks for help.


html css text-decorations
person Kacper G.    schedule 21.08.2017    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Вы не можете иметь два значения для одного свойства css одновременно.

Обходной путь: оберните текст в другой span и добавьте отдельное текстовое оформление для каждого диапазона:

span {
  font-size: 40px;
}

.wavy {
  text-decoration: underline wavy red;
}

.dashed {
  text-decoration: overline dashed blue;
}
<span class="wavy">
  <span class="dashed">Some Text </span>
</span>

person fen1x    schedule 21.08.2017
comment
Спасибо. Но только ли это один из способов? - person Kacper G.; 21.08.2017

arrow_upward
3
arrow_downward

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

span {
    position: relative;
    text-decoration: underline wavy red;
    border-top: 2px dashed blue;
}
<span> Some Text </span>

Ответьте, ваш комментарий здесь:

span {
    position: relative;
    text-decoration: underline wavy red;
}

span:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    content: '';
    border-top: 2px solid blue;
    top: 10px;
}
<span> Some Text </span>

person Ehsan    schedule 21.08.2017
comment
Ok. Спасибо. Как изменить позицию border-top, чтобы получить эффект зачеркивания? - person Kacper G.; 21.08.2017

arrow_upward
1
arrow_downward

Текст должен занимать несколько строк, даже заголовок подойдет для узких окон просмотра, как на смартфонах.
Вот многострочное решение, выполненное с линейным градиентом (ну, 2 из них, чтобы воспроизвести тире):

Codepen в Scss (просто используя 2 переменные для размера шрифта и высоты строки )

span {
  font-size: 40px;
  line-height: 1.5;
  text-decoration: underline wavy red;
  /*text-decoration: overline dashed blue;*/
  background-image:
    linear-gradient(to right, white 0, white 50%, transparent 50%, transparent 100%),
    linear-gradient(to bottom, blue 0, blue 1px, transparent 1px, transparent 100%);
  background-size:
    8px 100%,
    100% 60px;
  background-position: left top, left top;
  background-repeat: repeat, repeat;
}
<p><span> Some Text </span></p>

<p><span>Also<br>multiline</span></p>

Штрихи могут быть свободно изменены (это градиент между прозрачным и белым цветом, размер их, как вы хотите)

person FelipeAls    schedule 21.08.2017
comment
Спасибо. Хорошая идея. - person Kacper G.; 21.08.2017

arrow_upward
1
arrow_downward

Вы можете указать несколько строк, используя text-decoration-line. Вы могли бы подумать, что можно указать другой цвет и другой стиль для каждой строки, однако это не работает, как вы можете сами убедиться здесь:

span {
  /* This does not work! */
  text-decoration-line: underline overline;
  text-decoration-style: wavy dashed;
  text-decoration-color: red blue;
}
<span>Some Text</span>

Вот что говорит MDN:

CSS не предоставляет прямого механизма для указания уникального цвета для каждого типа линии. Тем не менее, этого эффекта можно добиться путем вложения элементов, применения разных типов линий к каждому элементу (с помощью свойства text-decoration-line) и указания цвета линии (с помощью text-decoration-color) для каждого элемента.

Итак, вот решение с использованием вложения:

.parent {
  text-decoration: underline wavy red;
}
.child {
  text-decoration: overline dashed blue;
}
<span class="parent"><span class="child">Some Text</span></span>

person Flimm    schedule 06.12.2019