CSS——27. 实战after 伪元素

时间sk

于 2025-01-09 03:14:35 发布

阅读量352

点赞数 4

分类专栏： CSS3 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_63215361/article/details/145021582

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>



		
		
		<style type="text/css">
			ul{
     
				width: 200px;margin: 0 auto;
			}
			ul li{
     
				width: 200px;height: 50px;line-height: 50px

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

时间sk

关注关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HarmonyOS Next开发学习手册——UI开发框架 (CSS语法参考)

maniuT的博客

07-14

898

CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容JS的类Web开发范式支持的组件样式。

伪类和伪元素有何区别

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-12

1151

伪类（Pseudo-classes）是CSS中一类特殊的选择器，它们并不是真正的类，而是表示元素的一种状态或条件。它们通常用于插入内容或修改元素的一部分的样式，比如插入元素之前或之后的内容，或者是修改元素的第一个字母或行的样式。通过以上的内容和示例，你应该已经对伪类和伪元素有了全面的认识，并能够在实际项目中灵活运用它们来提升用户体验和代码质量。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

参与评论您还未登录，请先登录后发表或查看评论

[CSS] 用伪元素:after实现分割线和气泡

05-31

用伪元素:after实现分割线和气泡

使用css after伪元素构造分割线

11-17

7060

测试地址： http://www.w3school.com.cn/tiy/t.asp?f=csse_background .header-block { float:left; min-width:250px } .header-block:after { background-color: #606060; bottom: 0; conten

CSS伪元素::after实现分割线

weixin_60932546的博客

08-20

608

3、分割线两侧内边距（根据需求酌情调整）

CSS——26. 伪元素2（“::before ，::after”）

最新发布

weixin_63215361的博客

01-08

227

【代码】CSS——25. 伪元素2（“::before ，::after”）

CSS伪元素画分割线与其它实用方法（::before、::after）

I大俊

12-21

4878

CSS伪元素画分割线与其它实用方法（::before、::after）

狂神说——CSS3最新教程快速入门通俗易懂

05-26

3. 伪类和伪元素：`:hover`, `:active`, `:focus`等伪类以及`::before`和`::after`伪元素增加了更多的交互可能。二、边框与背景 1. 圆角边框：`border-radius`属性可以创建圆角效果，让元素看起来更加平滑。 2. ...

【CSS伪元素布局妙用】：5个创造性的布局解决方案

CSS伪元素是实现高效布局和增强用户交互体验的重要工具。本文首先介绍了伪元素的基础知识和布局原理，阐述了其与布局、响应式设计和用户交互的紧密联系。接着，本文深入探讨了创造性布局方案的理论与实践，包括导航...

用伪元素做分割线

weixin_44164982的博客

07-05

1252

<div id="header"> ----------设置给定的高度，宽度100% <div class="header">--------------设置给定高度、宽度，设置居中 <div class="header_left">------------float：left；设置宽度，高度一般和父类相同内容（ul li span）----------line-height=高度，设置居中 </di...

css分割线

UserGuan的博客

05-01

1708

方式一：使用after与before设置 .box_area { position: relative; color: #000; font-size: 24px; text-align: center; overflow: hidden; } .box_area::after, .box_area::before { position: absolute; top: 50%; content: ''; width: 100%;

用：after伪元素标签写分割线

致年在学习

11-02

1万+

最近在手机商城和微信页面很多都用到了分割线，下面总结用到的分割线。第一种：效果： html: 产品热卖 ________________________________ style: .hot{ width:100%; height:20px; background-co

::after伪元素实现分割线

Zexious的博客

04-24

2753

很多时候，在页面上需要分割线来分割行，板块… 显然现在很少人用&lt;hr&gt; 来实现分割了吧。。今天刚学到一手：用:after伪元素实现模块分割，使之看起来不是那么的空泛无序。首先准备html： &lt;div class="logo"&gt; &lt;a href="#"&gt; M2B2C

使用CSS：Before伪元素设置块级分割线

留白空间

01-18

1万+

今天学习了css中：before选择器的用法。原来该选择器的作用是往元素的内容之前插入新内容，同时可以给内容设置样式，after也是同样的用法，而这两个伪元素的功用还仅于此，在这里，我只是介绍利用该伪元素的一个简单用法——实现文章列表间的分割线效果。更多用法大家可以参考这篇文章：详细可参考这篇文章：你所不知的 CSS ::before 和 ::after 伪元素用法，很多实用功能的说，不过需要注意的

伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡

weixin_39559333的博客

02-22

2615

学习前端网页开发并将其应用于工作中已经两个月了，发现前端包括的内容真的是无比丰富，知识量巨大……漫漫长路远，尚需艰苦努力。作为一只前端开发的菜鸟，写不了特别深刻的关于前端技术性文章，只是想将工作中遇到比较有意思的内容收集整理一下，理解一下，分享一下，希望对自己有所帮助，如果也能给读者带来一些帮助和启发，将不甚荣幸……闲话少说，进入正题。在网页设计中显示分割线可以使用元素的border单边显示即可，...

：after伪元素标签写分割线

致年在学习

11-02

932

最近在写手机商城网站，用到了分割线，下面跟大家分享一下这种写法。第一种写法： html: 产品热卖 style: .hor{ width:100%; height:20px; background-color:#f2f2f2; text-a

css实现分割线或者小竖线

qq_26889291的博客

11-16

5015

css实现分割线或者小竖线

css的各种分割线