
Таким образом, заостряем внимание читателей на чём-то важном.
Предложу совсем маленький код, более интересного варианта. Так можно оформить заголовки внутри поста или
Наведи на меня курсор
Реализация очень простая. Для начала просто копируйте в блокнот следующий код.
<style>.slid {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.slid:after {
content: '';
display: block;
position: absolute;
left: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.slid:hover:after {
width: 100%;
background: #2B0486 ;
}</style>
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.slid:after {
content: '';
display: block;
position: absolute;
left: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.slid:hover:after {
width: 100%;
background: #2B0486 ;
}</style>
Синим я выделила толщину линии подчёркивания. Красным - её цвет. Можете воспользоваться для изменения цвета этим генератором. Обратите внимание на направление линии. В данном коде она будет идти слева направо. Если нужно наоборот, то поменяйте значение left: 0; на right:0;.
Теперь при написании сообщения в том месте где хотим подчеркнуть строку, переходим из режима создать в режим HTML и вставляем такой код.
<div class="slid ">
вот здесь и пишем вашу подчёркнутую строку</div>
И под ней или, вообще, в самом конце сообщения, код, приведённый ниже. Если предполагается постоянно использовать такой эффект, разумнее будет этот код установить прямо в шаблоне блога перед строкой ]]></b:skin>. Но уже без тегов <style>..</style>.
В режиме просмотра сообщения вы эту фишку видеть не будете. Если всё правильно сделали, эффект появиться после публикации.
А я пожелаю вам удачи и до скорых встреч. Спасибо, что заглядываете в мои шпаргалки.
здесь можно оформить подписку на новые шпаргалки
Спасибо!
ОтветитьУдалитьОбязательно применю)
Пожалуйста, Лариса. Хорошо, что пригодилось.
Удалить