伪元素before、after示例

伪元素before、after示例

1、运行效果

2、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素示例</title><style type="text/css">.question::before {content: "问题：";color: red;font-weight: bold;}.question::after {content: "——李文霞";color: #cccccc;}.answer::before {content: '回答：';color: blue;font-weight: bold;}.answer::after {content: "——钟文杰";color: #cccccc;}</style>
</head>
<body>
<h3>演示before与after用法</h3>
<hr/>
<p class="question">你最近有什么打算？</p>
<p class="answer">准备学习大数据基础。</p>
<p class="question">你为什么要学习大数据？</p>
<p class="answer">更好地适应这个信息化大潮，避免被时代淘汰。</p>
<p class="question">你怎么学习大数据？</p>
<p class="answer">先看看书，或者看看入门视频。</p>
</body>
</html>

伪元素before、after示例相关推荐

JS操作CSS伪元素
参考链接: segmentfault MDN CSSStyleSheet QQ群闲逛,看到有人说js不能操作css的伪元素样式, 之前没有遇到过应用场景,我当时想到的就是操作通过操作class来控制样 ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
[转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器代码示例代码说明通用选择器 * *{} 选择所有元素. 标签选择器 ...
CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
java的string访问某个元素_CSS伪类与伪元素总是傻傻分不清，这份总结够面试用了
熟悉前端的人都会听过 css 的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面 ...

伪元素before、after示例

伪元素before、after示例相关推荐

最新文章

热门文章