html - 独特的文字而不是数字

标签 html css

<分区>

如何用我的独特文本替换数字?让我们说而不是 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>

最佳答案

这有点hackish..

如果你想用你想要的任何东西替换数字,你首先要删除列表样式类型。

ul {
    list-style-type: none;
}

接下来,使用 :before 伪代码以及 :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 here.

关于html - 独特的文字而不是数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18550917/

上一篇:php - 网站图标定制或动画

下一篇:html - 我的网站在除 Firefox 之外的所有浏览器中都能正常显示

相关文章:

html - 需要删除 css 中的一些空间

html - 垂直和水平始终将图像对齐在导航栏中的空间中心

javascript - 计算变换原点以将图像缩放到视口(viewport)中间

javascript - JS - 为什么在正常流程中 div 之间有空间

jquery .offset().top 没有预期的行为

javascript - jquery 约束 div 到最大窗口高度

html - PWA - IOS 13 深色模式下的状态栏背景和文本颜色

html - 为什么按钮的文字没有居中对齐?

html - 使用CSS添加按钮按下效果

html - 在窗口调整大小之前激活 CSS 属性?