伪元素,表示页面中一些特殊的并不真实存在的元素。(特殊的位置)
伪元素使用::开头
::first-letter表示第一个字母
p::first-letter{}表示选中p里边的第一个字母
【如下,首字母L变大,字体也会变粗,换成任意字母也是一样的,不会发生变化】
<style>p::first-letter{
font-size: 50px;
}
</style>
</head>
<body>
<p>Learn ipsum dolor sit</p>
</body>
::first-line表示第一行【示例如下】
<style>p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;(背景颜色,当你给页面缩小时,只有第一行是黄色)
}
</style>
</head>
<body>
<p>Learn ipsum dolor sit</p>
</body>
::selection表示选中的内容
::before表示元素的开始
::after表示元素的最后
before和after必须结合content属性来使用
示例:
<style>div::befor{
content:‘aaa’;【网页中显示出为红色aaa】
color:red;
}
</style>
<body>
<div>what are you doing</div>
</body>
::after和::before用法一样,不过::after在最后