首页 前端 CSS 正文

如何使用 CSS 自定义无序列表样式

   大家好,我是前端西瓜哥。    前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。    设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点。    默认的无序列表样式是这样的。 <style>  ul {    width: 200px;    border:

大家好,我是前端西瓜哥。

前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。

设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点

默认的无序列表样式是这样的。

<style>
  ul {
    width: 200px;
    border: 1px solid #555;
    font-size: 13px;
    line-height: 20px;
    color: #2362d6;
  }
</style>

<ul>
  <li>我是第一行。</li>
  <li>你是第二行你是第二行你是第二行你是第二行你是第二行</li>
  <li>三</li>
</ul>

如何使用 CSS 自定义无序列表样式  第1张

虽然觉得有点花里胡哨,但我还是去研究了,看看怎么给圆点变大一点。

::before

我们先将 li 原有的圆点去掉,通过给 li 加上 list-style: none; 的方式。

然后用 ::before 给 li 前面创建一个伪元素,加上圆点字符。

ul {
  /* ... */
  /* 稍微调整一下 ul 的左边距 */
  padding-inline-start: 20px;
}
li {
  list-style: none;
}
li::before {
  /* 这里加两个空白符作为边距 */
  /* 你也可以用 margin-right */
  content: "\2022  ";
  font-size: 22px;
}

这里我给 content 的值末尾加了两个空格符,来实现右边距效果。你也可以用 margin-right 来做,更正规一些。

注意点:这里 content 的值最好用转义字符,不要用原字符,因为我发现在某些浏览器会乱码

如何使用 CSS 自定义无序列表样式  第2张

圆点没和文字水平居中对齐,我们用 transform 微调一下位置。

需要注意的一点是,transform 对行内元素(display: inline)无效。而 ::before 伪元素默认为行内元素,需要手动改为 inline-block。

完整写法为:

ul {
  width: 200px;
  border: 1px solid #555;
  font-size: 13px;
  line-height: 20px;
  color: #2362d6;
  padding-inline-start: 20px;
}
li {
  list-style: none;
}
li::before {
  content: "\2022  ";
  display: inline-block;
  font-size: 22px;
  transform: translateY(3px);
}

如何使用 CSS 自定义无序列表样式  第3张

设计师很满意地离开了。

但过了几天,他发现有些不对劲,又跑过来和我说:不对,这个换行的文字起始位置不应该在圆点下边,而是应该和第一行文字左侧对齐,也就是应该像下面这样。

如何使用 CSS 自定义无序列表样式  第4张

::before + 绝对定位

问题不大,马上改。

将 ::before 伪元素设置为绝对定位,让圆点脱离正常文档流。这次我们用 left 来调整位置。

完整的写法为:

ul {
  width: 200px;
  border: 1px solid #555;
  font-size: 13px;
  line-height: 20px;
  color: #2362d6;
  padding-inline-start: 40px;
}
li {
  position: relative;
  list-style: none;
}
li::before {
  content: "\2022  ";
  position: absolute;
  left: -11px;
  display: inline-block;
  font-size: 22px;
}

效果很完美,设计师很满意地离开了。

如何使用 CSS 自定义无序列表样式  第5张

list-style-type 和 ::marker

如果你不需要修改圆点大小,而是想替换为其他符号,还用一种写法是使用 list-style-type 或 ::marker。

list-style-type 用在 ul 元素上。

ul {
  width: 200px;
  border: 1px solid #555;
  font-size: 13px;
  line-height: 20px;
  color: #2362d6;
  padding-inline-start: 20px;
  list-style-type: "\2708"; /* 飞机符号 */
}

然后我们看到原点变成了飞机字符:

如何使用 CSS 自定义无序列表样式  第6张

::marker 则是用在 li 元素上,可以让不同的 li 使用不用样式。

li::marker {
  content: "\2708";
}

更具体的写法这里就不展开讲了,读者可以自行阅读官方文档。

但这种方案在修改圆点大小后,无法使用 transform 进行位置的调整,所以我没有用这个。

结尾

小小的无序列表自定义样式也挺多门道的,希望对你有所帮助。

我是前端西瓜哥,分享前端知识,欢迎关注我。

首发于我的公众号:前端西瓜哥

原文:https://juejin.cn/post/7099627025970921502
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/5107.html

相关推荐

网络字体的使用流程与原理✨

网络字体的使用流程与原理✨

   大家好,我是前端西瓜哥。    前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。    设计师...

CSS 2022.06.02 0 182

用比较简单的方式实现消息数量提示

   效果预览    代码片段    前言    在页面上,有时需要提示用户有新消息或者有多少消息未读,通常会在相关元素的右上角添加一个数字,用于提示还有多少消息未...

CSS 2022.06.01 0 121

2022年你不知道的CSS新特性

2022年你不知道的CSS新特性

   大家好,我是前端西瓜哥。    前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。    设计师...

CSS 2022.05.31 0 144

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站