Home >Web Front-end >HTML Tutorial >CSS pseudo-element_html/css_WEB-ITnose
CSS pseudo-element_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:41812browse
f35d6e602fd7d0f0edfa6f7d103c1b57
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p:first-line { /*伪元素： 本来p元素的第一行是一句文字，并不是一个元素，但是这里将p元素的第一行伪装成一个元素了，然后给它设置样式; */ font-size:30px; font-family:Arial; color:red; } p:first-letter { /*这里将p标签这个元素的第一个字母伪装成一个元素，然后给他设置样式*/ font-size:3cm; } :root { /*将样式绑定到页面的根元素中，所有根元素是指位于文档中最顶层结构的元素，即<html> 即将HTML的背景设置为黄色*/ background-color:yellow; } </style></head><body> <p> Aaaaaaaaaaa<br/> bbbbbbbbbbb<br /> ccccccccccc<br /> </p></body></html>
2cc198a1d5eb0d3eb508d858c9f5cbdb
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p:before { /*在p元素前面追加一个“你好”文字*/ content:"你好！"; } p:after { /*在p元素后面追加一个“大家好”文字*/ content:"大家好！" } </style></head><body> <p> Aaaaaaaaaaa </p></body></html> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Mobile front-end_html/css_WEB-ITnoseNext article：Mobile front-end_html/css_WEB-ITnose