Цвят за text-decoration:line-through

от Fuedo - Уеб дизайн енциклопедия

Направо към: навигация, търсене

Наскоро клиент поиска от мен да зачеркна една цена с червена черта и да добавя след нея намалената. Веднага си помислих, че text-decoration:line-through ще ми свърши работа, докато не осъзнах, че чертата трябва да е червена и текстът черен. Веднага попитах в моя любим форум и ми показаха следния трик който искам да споделя с вас :-) Технологията е много проста въпреки, че изисква малко излишен маркъп. Ето го и кода който ми беше предоставен като пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>
      Untitled Document
    </title>
    <style type="text/css">
      .test2 em {color:#000;font-style:normal;}
      .test2 span{text-decoration:line-through;color:red}
    </style>
  </head>
  <body>
    <p class="test2">This is some text that is<span><em>crossed out with a red line</em></span>and this isn't crossed out.</p>
    <p>testing</p>
  </body>
</html>

Както виждате, просто задавате един цвят за текста(това ще бъде цвета на чертата) на външния таг(span), а след това задавате на вътрешния таг(em) друг цвят(това ще бъде цвета на текста). Може да приложете същото и за подчетаване text-decoration:underline, но за него може да използвате и долна рамка, така че не е препоръчително поради изискването на допълнителен маркъп.

Взето от „http://fuedo.com/index.php?title=%D0%A6%D0%B2%D1%8F%D1%82_%D0%B7%D0%B0_text-decoration:line-through“.
Лични инструменти