门户网站英文,公众号做网站,什么是网站接入商,建立旅游网站的目的文章目录 什么是CSS伪类#xff1f;什么是伪元素#xff1f;怎么用伪元素#xff1f;可以做些什么#xff1f;::before#xff0c;在标签选择器之前添加内容#xff0c;::after正好与之相反::before#xff0c;在类选择器之前添加内容#xff08;:制作一个悬浮提示窗 参… 文章目录 什么是CSS伪类什么是伪元素怎么用伪元素可以做些什么::before在标签选择器之前添加内容::after正好与之相反::before在类选择器之前添加内容:制作一个悬浮提示窗 参考链接 作为一名假前端css在我眼里是一个非常神奇的东西。我只会想页面上的内容需要以什么方式展示但是不知道怎么用css去实现或者说不知道css里面有哪些技术可以实现。最近发现css中伪类的一个用法特意查询了一下感觉很有趣记录一下。 请允许我先暂且叫它们
css伪类 后来我通过查阅相关的资料发现
css伪类和
css伪元素是两种不同的东西。 在css3中按照规范使用
单冒号: 表示伪类使用
双冒号:: 表示伪元素 常见的伪类 :hover表示鼠标移动到某个元素上会发生什么。 :hover - CSS层叠样式表 | MDN :visited表示鼠标激活某个链接后会发生什么。通常用在a标签和area标签 :visited - CSS层叠样式表 | MDN :checked表示鼠标选中某些元素后会发生什么。如单选、复选、下拉等 :checked - CSS层叠样式表 | MDN …… 常见的伪元素 ::before在某个类或伪类之前添加内容 ::after (:after) - CSS层叠样式表 | MDN ::after在某个类或伪类之后添加内容 ::before (:before) - CSS层叠样式表 | MDN ::marker在某个类或伪类之前添加标志 ::marker - CSS层叠样式表 | MDN ::placeholder如表示input输入框提示文本的样式 ::placeholder - CSS层叠样式表 | MDN ……
这里不对伪类做太多的讨论重点看一下伪元素是怎么用的。
什么是CSS伪类什么是伪元素
伪类 - CSS层叠样式表 | MDN 伪元素 - CSS层叠样式表 | MDN
怎么用伪元素可以做些什么
::before在标签选择器之前添加内容::after正好与之相反 !DOCTYPE html
html
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgetitle伪元素测试/titlelink relstylesheet hrefstyle typetext/css/* 给所有span元素添加手型 */span {cursor: pointer;}/* 给所有span元素添加鼠标悬浮上去之后在当前span元素前面添加竖线 */span:hover::before {content: ;font-size: 20px;border-right: solid darkred;}/style
/head
body styletext-align: center;span classmenu目录1/spanbrspan classmenu目录2/spanbrspan classmenu目录3/spanbrspan classmenu目录4/spanbr
/body
/html::before在类选择器之前添加内容:制作一个悬浮提示窗 !DOCTYPE html
html
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgetitle伪元素测试/titlelink relstylesheet hrefstyle typetext/css.menu {cursor: pointer;display: block;line-height: 15px;margin: 20px;}.menu:hover::before {content: ;font-size: 20px;border-right: solid darkred;}/* 定义提示窗口的样式 */.tips {display: none;
/* display: inline-block;*/position: absolute;min-width: 155px;max-height: 55px;width: max-content;background: rgba(0, 0, 0, 0.8);padding: 10px 12px;border-radius: 4px;color: #fff;left: 30px;top: -10px;}/* 定义问号样式 */.tips-question {position: absolute;display: inline-block;background-color: #080808;width: 15px;height: 15px;line-height: 15px;text-align: center;border-radius: 10px;cursor: pointer;user-select: none;color: white;font-size: 11px;font-weight: bold;width: -moz-max-content;}/* 问号鼠标悬浮上之后展开提示窗口 */.tips-question:hover .tips {display: inline-block;}/* 展开提示窗口之后在窗口左边加一个小三角形 */.tips-question .tips::before {content: ;border: solid 12px #00000000;border-right-color: rgba(0, 0, 0, 0.8);position: absolute;top: 7px;left: -20px;}/style
/head
body styletext-align: center;ulli classmenu目录1div classtips-questionp styledisplay: inline;?/pdiv classtips悬浮展示1/div/div/lili classmenu目录2div classtips-questionp styledisplay: inline;?/pdiv classtips悬浮展示2/div/div/lili classmenu目录3div classtips-questionp styledisplay: inline;?/pdiv classtips悬浮展示3/div/div/lili classmenu目录4div classtips-questionp styledisplay: inline;?/pdiv classtips悬浮展示4/div/div/li/ul
/body
/html参考链接
css中::before ::after的用法_css中before和after的用法-CSDN博客
