首页 > 其他分享 >css案例-after伪类元素的例子

css案例-after伪类元素的例子

时间:2023-07-25 22:44:31浏览次数:39  
标签:伪类 solid after 1px 10px div border css

下位三角例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <div>

    </div>
</body>

</html>

<style>
    div {
        width: 200px;
        height: 20px;
        border: 1px solid;
        position: relative;
        transition: all .5s linear;
    }

    div::after {
        position: absolute;
        top: 2px;
        right: 10px;
        content: '';
        width: 10px;
        height: 10px;
        border-bottom: 1px solid red;
        display: block;
        transform: rotate(45deg);

        border-right: 1px solid red;
    }

    div:hover::after {
        transform: rotate(225deg);
        top: 8px
    }
</style>

 

标签:伪类,solid,after,1px,10px,div,border,css
From: https://www.cnblogs.com/dming4/p/17581231.html

相关文章

  • 02_CSS
    1.CSS1.简介1.是什么CascadingStylesheets,层叠样式表CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰。所谓层叠,可以将整个网页想象成一层一层的结构,层次高的将会覆盖层次低的,CSS可以分别为网页的各个层次设置样式。2.能做什么修饰美化html网页;外部样式表可以......
  • TailWind CSS工具库使用
    一、简介官方文档本CSS框架本质上是一个工具集,包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类,可以组合使用并直接在HTML代码上实现任何UI设计。二、安装介绍VUE项目的相关安装步骤1.安装TailWindCSS通过npm安装tailwindcss和它的相关依......
  • How to Restore ASM Based OCR After Complete Loss of the CRS Diskgroup on Linux/U
    InthisDocumentGoalSolutionReferencesAPPLIESTO:OracleDatabase-EnterpriseEdition-Version11.2.0.1.0andlaterOracleDatabaseCloudSchemaService-VersionN/AandlaterGen1ExadataCloudatCustomer(OracleExadataDatabaseCloudMachine)......
  • css制作三角
    使用border属性制作三角:当给一个宽高为0的盒子设置不同颜色的边框时会如下图所示,由此可见,想要设置三角,则可以将其余三条边框设置为透明色<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-widt......
  • [爬虫]1.2.2 CSS选择器
    CSS(CascadingStyleSheets)是一种样式表语言,用于描述HTML元素的样式。CSS选择器是CSS规则的一部分,它决定了CSS规则应用于哪些元素。在网络爬虫的开发中,我们经常使用CSS选择器来定位和选取HTML元素。以下是一些常见的CSS选择器:1.元素选择器元素选择器选择所有给定的HTML元......
  • CSSYZ 思维训练 R4
    ProblemA题目大意给出一张只有0和1的矩阵,可以将$k$个点反转,求是否可以使这个矩阵中心对称,多测。算法分析这题是一个非常经典的贪心策略问题,我们发现,如果一个矩阵中心对称,那么$a_{i,j}$一定要和$a_{n-i+1,m-j+1}$所以,我们只要求出有几组应该对称的点并没有......
  • 如何使用 After Effects 导出摄像机跟踪数据到 3ds Max
     推荐:NSDT场景编辑器助你快速搭建可二次开发的3D应用场景在本教程中,我将展示如何在AfterEffects中跟踪实景场景,然后将相机数据导出到3dsMax。1.项目设置步骤1打开“后效”。打开后效果步骤2转到合成>新合成以创建新合成。或者,您可以按 Ctrl-N 键。它打开合成设......
  • FLEX里的CSS样式设置教材
    FLEX3中应用CSS完全详解手册!编辑完这个FLEX下的CSS说明后,我基本已经兵临崩溃边缘了。在些天在AIRIA下了不少好东西,今天终于有空,也发一个比较不错的东西给大家,相信都比较需要这个FLEX下的CSS使用方法的详细说明(好像我这份还不够详细,望大家补充)。AIRIA真的是一个不错的网站,很高......
  • css3之:target伪类
    CSS3target伪类    -------用来匹配URI某一个标志符的目标元素。一般url中包含"#"字符,后面带有一个标志符号,如:"#top" 1、浏览器支持情况:      除了IE6-8,其他浏览器都支持。     http://caniuse.com/#search=%3Atarget  2、使用方式:   //类似于hov......
  • CSS3媒体查询
    什么是媒体查询?媒体查询(MediaQuery)是CSS3新语法。使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机,平板等设备......