css - CSS: ハイライトされたテキスト効果

Question

少しのパディングで強調表示されたテキスト効果を生成しようとしていますが、パディングは最初と最後にのみ適用され、新しい行には適用されません。

#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

こちらをご覧ください: http://jsfiddle.net/CNJZK/7/

内部 (「鋭い」) エッジを少し延長するための純粋な CSS 修正はありますか? つまり、この画像のように: http://i.imgur.com/j8mIJZS.jpg

Answer 1

特定の HTML 標準に限定されていない場合は<mark>、HTML5 で導入された タグを参照してください。このサイトは、簡単な見落としを提供します。

それが役に立てば幸い！

Answer 2

誰かがまだ答えを探している場合：

p {
    box-shadow: 0px 0px 0px 5px yellow;
    display: inline;
    line-height: 2;
    margin: -5px -5px;
    background-color: yellow;
    border-radius: 1px;
}

ここでjsfiddleを参照してください。

Answer 3

inline-block表示をまたはに設定する必要がありますblock。

#highlight {
    display: inline-block;
    /* ... */
}