CSS свойство text-decoration

Содержание web-сайта, в тех или иных случаях, требует оформления его части в виде подчёркнутого, перечёркнутого, а также текста с линией сверху или мигающий вариант отображения, который в прочем в настоящее время мало используется в виду не соответствия с текущими требованиями. Одновременно можно задействовать более одного стиля, перечисляя выбранные значения через пробел.

Наиболее распространённые стили

underline – подчёркивание текста сплошной линией.


HTML

<div class="box">
  <p>
    Подчеркнутый текст.
  </p>
</div>


CSS

.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #fc0;
    border: 3px solid #960;
}
.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

line-through – вывод перечеркнутого текста.


HTML

<div class="box">
  <p>
    Перечёркнутый текст.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : line-through; 
}

none – отменяет все заданные ранее эффекты, включая и подчеркивания у ссылок которое установлено по умолчанию.


HTML

<div class="box">
  <p>
    Отмена эффектов.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : none;
}

Менее используемые стили

overline – отображает текст с линией поверх него.


HTML

<div class="box">
  <p>
    Линия над текстом.
  </p>
</div>


CSS

text-decoration : overline;

blink – этот параметр задаёт пульсирующий текст.


HTML

<div class="box">
  <p>
    Пульсирующий текст.
  </p>
</div>


CSS

text-decoration : blink;