前端技术学习之选择器（十三）

2019独角兽企业重金招聘Python工程师标准>>>

十五，::before和::after

::before和::after这两个伪元素主要用来给元素的前面或者后面插入内容。

代码例子：我们在三角形的基础上插入十二边形

<!DOCTYPE html>

<html>

<head>

</head>

<style>

#star-six {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

#star-six::after {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

position: absolute;

content: "";

top: 30px;

left: -50px;

}

</style>

<body>

</body>

</html>

运行效果：

转载于:https://my.oschina.net/u/2971691/blog/825946

前端技术学习之选择器（十三）相关推荐

前端技术学习之选择器（一）
2019独角兽企业重金招聘Python工程师标准>>> 一. 属性选择器属性选择器就是根据元素的属性及属性值来选择元素 1,只根据属性选择元素适用于希望选择有某个属性的元素,只关 ...
2015.12.08-2015.12.11 硕士毕业大论文前端技术学习
毕业大论文:本周完成第二章:异步电机故障诊断机理分析第二章基于HHT的电机故障特征提取前端技术学习:完成书本第10章 DOM 12.08 异步电机故障诊断机理分析&DOM10.1.1 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
前端技术学习：语义化
前端技术学习一.语义化 1. 为什么要使用语义化 2. 语义化标签 (1)容器标签 artical section div (2)关于页面的标签 nav aside header main foot ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
Web前端技术学习路线图初阶+中阶+高阶
一.报告名称前端技术学习路线图二.作者阿里前端委员会:孟令君 | 舒文亮 | 许智燕 | 赵兴越 | 王忆天 | 吴天豪 | 潘佳 | 包续兵 | 张伟 | 王卓 | 金擘 | 周祺 | 张舒迪 ...
Java前端技术学习
一.Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文 ...
前端技术学习路线及技术汇总
第一阶段网页开发基础首先从以下几个方面了解web: 一.Web的概述 1.万维网的发展 2.浏览器与服务器 3.网页与网站 4.域名与主机 5.HTTP协议 6.W3C标准需要了解的核心是:浏览器 ...
前端入门学习笔记九十三
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...

前端技术学习之选择器（十三）

前端技术学习之选择器（十三）相关推荐

最新文章

热门文章