CSS伪元素after、before使用示例（三）

喜欢ヅ旅行 2022-04-08 09:47 238阅读 0赞

用户:after元素实现小旗的燕尾效果。如下图所示：  
\[align=center\]  
\[img\]http://dl2.iteye.com/upload/attachment/0123/9281/42602402-942c-3b45-81cb-67da778e7d51.png\[/img\]  
\[/align\]  
  
　　代码很简单，就是把:after元素旋转一下：

<style type="text/css">
        	.section__title{
       
        		width:10em;
        		padding-left:1em;
        		height:1.6em;
        		line-height:1.6em;
        		vertical-align:middle;
        		background-color:red;
        		position:relative;
        	}
    
        	.section__title:after{
       
        		content:"";
        		position:absolute;
        		display:block;
        		width:1.6em;
        		height:1.6em;
        		right:-0.5em;
        		top:0.1em;
        		background-color:white;
    			-ms-transform:rotate(45deg); 	/* IE 9 */
    			-moz-transform:rotate(45deg); 	/* Firefox */
    			-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
    			-o-transform:rotate(45deg); 	/* Opera */
        		tranform:rotate(45deg);
        	}
        	.section__bd{
       
        		text-indent:2em;
        		margin-bottom:1em;
        		margin-top:0.5em;
        	}
        </style>

<div class="section__title">一、活动说明</div>
    	<div class="section__bd">
    	层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
    	</div>
    
    	<div class="section__title">二、行程安排</div>
    	<div class="section__bd">
    	层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
    	</div>

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关伪类伪元素 css3_伪类| CSS

伪类伪元素 css3 These classes are basically used to add special effects to some selectors o

迈不过友情╰/ 2023年03月05日 10:59/ 0 赞/ 5 阅读

相关【CSS】CSS 伪类和伪元素

目录 1. 什么是伪类和伪元素？ 1.1 伪类 1.2 伪元素 2. 伪

红太狼/ 2023年02月15日 15:54/ 0 赞/ 55 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 184 阅读

相关 css伪元素

CSS 伪元素 -------------------- CSS伪元素是用来添加一些选择器的特殊效果。资料： [https://www.runoob.com

向右看齐/ 2022年12月17日 08:57/ 0 赞/ 243 阅读

相关 CSS伪类和伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

ゝ一世哀愁。/ 2022年12月06日 12:45/ 0 赞/ 246 阅读

相关 css伪元素的使用

[CSS 巧用 :before和:after][CSS _ _before_after] 前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问

朴灿烈づ我的快乐病毒、/ 2022年06月02日 05:38/ 0 赞/ 236 阅读

相关 CSS伪元素after、before使用示例（三）

　　用户:after元素实现小旗的燕尾效果。如下图所示： \[align=center\] \[img\]http://dl2.iteye.com/upload/att

喜欢ヅ旅行/ 2022年04月08日 09:47/ 0 赞/ 239 阅读

相关 CSS伪元素after、before使用示例（二）

　　通过对:after、:before伪元素的控制，可以发挥相像力实现很多效果，如： \[align=center\] \[img\]http://dl2.iteye.

红太狼/ 2022年04月08日 09:22/ 0 赞/ 160 阅读

相关 CSS伪元素after、before使用示例（一）

　　大家都知道使用CSS可以容易使用以下效果。 \[align=center\] \[img\]http://dl2.iteye.com/upload/attachme

逃离我推掉我的手/ 2022年04月08日 09:20/ 0 赞/ 168 阅读

相关 CSS伪元素after、before使用示例（四）

　　使用:before、:after伪元素，添加分割线。不用增加DOM元素，只需在对应元素上添加样式即可。 /元素前、后画线的处理/ .hra,.

拼搏现实的明天。/ 2022年04月06日 01:38/ 0 赞/ 196 阅读