1

数字を独自のテキストに置き換えるにはどうすればよいですか? 1. 、 2. 、 3. の代わりに、 Bla 、 Blabla 、 Blablabla を入れたいとしましょう。

http://i.stack.imgur.com/kf0p4.jpg

<style>
#menu2 {
width: 320px;
}
#menu2 ol {
font-style: talic;
font-family: Georgia, serif;
font-size: 24px;
color: #bfe1f1;
}
#menu2 ol li p {
padding:8px;
font-style: normal;
font-family: Arial;
font-size: 13px;
color: #eee;
text-align:left;
border-left: 1px solid #999;
}
#menu2 ol li p em {
display: block;
}
</style>
<div id="menu2">
<ol>
  <li><p><em>Jeden</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
  <li><p><em>Dwa</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
  <li><p><em>Trzy</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
  <li><p><em>Cztery</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
</ol>
</div>
4

1 に答える 1

-1

これは少しハックです..

数値を必要なものに置き換えたい場合は、リスト スタイル タイプを削除することから始めます。

ul {
    list-style-type: none;
}

次に、:beforepseudo を with とともに使用し:nth-childて、マークアップをターゲットにします。

content: " "リスト項目の前にあるテキストはどこにありますか。

li:before {
    content: "ugh";
    padding-right:10px;
}
li:nth-child(2):before {
    content:"blah";
}
li:nth-child(3):before {
    content:"foo";
}

ここでjsFiddle。

于 2013-08-31T17:48:08.180 に答える