小编tro*_*net的帖子

嗨,
我现在正试图用HTML/CSS设置一些看起来像便利贴的东西.

我瞄准的形象

请注意,无论该行中有多少个字符,每行都应加下划线.每个新行都应该完全加下划线.

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和核主题来创建它.

非常感谢您的帮助!

关于JSFiddle的例子:http://jsfiddle.net/8w9Lj7nd/