Привет,
В настоящее время я пытаюсь установить что-то с HTML/CSS, которое выглядит как примечание post-it.
Изображение того, на что я нацеливаюсь
Обратите внимание, что каждая строка должна быть подчеркнута, независимо от количества символов в этой строке. Также должна быть подчеркнута каждая новая строка.
HTML:
<p>
<img src="http://trööt.net/img/pin.png" alt="Stecknadel"/>
<font>Heading</font><br />
<span class="blockMargin">
<span class="underline">
<strong>Subheading</strong> text text text
</span>
</span>
</p>
CSS
p {
background-Color: #ffc;
padding: 1em;
width: 40em;
box-shadow: 5px 5px 3px 0px rgba(119,119,119,0.7);
text-align: justify;
}
img{
float: None;
height: 4em;
display: block;
margin-left: Auto;
margin-right: Auto;
}
.blockMargin{
display: block;
margin-bottom: -1px;
}
.underline{
border-bottom: 1px dotted #c03;
}
Это код, который я использую сейчас (получил идею уже от stackoverflow.com). Однако он не подчеркивает, что строки завершены, но работает точно так же, как text-decoration: underline
...
Любые идеи? Может быть, я должен добавить, что создаю это с помощью WordPress и Nuclear-Theme.
Большое спасибо за вашу помощь!
Пример в JSFiddle: http://jsfiddle.net/8w9Lj7nd/