<div class="main_text">哈哈这就是我的小视频</div>

上面为html代码

接下来进行css的编写

.main_text{
position:relative; //给其一个相对定位
}
.main_text::after{ //我们要对其使用伪类元素
content:"";
width:100%;
height:1px;
position:absolute;
left:;
bottom:;
background-color:#000; //这里颜色可以自己设定,也可以设置继承和文字一样的颜色
transform:scale(0); //刚开始是没有放大的
transform-origin:left bottom; //这个属性必须要在transform之后,他定义的是一个基点,具体的需要自己百度去看一看,我们这里定义的是在左下角
transition:all 0.4s; //给其一个动画时间
}
.main_text:hover::after{
transform:scale(1); //当元素被hover時,伪类元素放大
}

以上代码就是这样,可以根据自己的需求来进行更改就可以了

有关css编写文字动态下划线的更多相关文章

  1. css给文字加下划线

    语法:linear-gradient(direction, color-stop 1, color-stop 2,……) 简单用法:background-image: linear-gradient( ...

  2. css标题文字和下划线重叠

    <view class="text"> <text class="textCon">标题</text> <text c ...

  3. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  4. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  5. 文字排版--下划线(text-decoration:underline)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. html网页中如何给文字加入下划线

    网页中一些重要的文字或者特殊性高的文字,例如:链接,标注等我们需要加上下划线,那么这里我们就需要使用到<U>标签了,写法如下 字体下划线: <u>这里添加内容</u> ...

  7. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 1.1.15 word调整文字与下划线之间的间距

    先请按CTRL+U快捷键,或点击“下划线”按钮,然后输入一个空格,再输入文字“下划线间距”,在文字的尾部再添加一个空格.选中文字内容(注意不要选中首尾的空格),单击菜单“格式”→“字体”,在“字体”设 ...

  9. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

随机推荐

  1. 10、VLAN

    VLAN综述:1.分段2.灵活性3.安全性 一个VLAN=一个广播域=逻辑网段(子网) VLAN运作:1.每个逻辑的VLAN就象一个独立的物理桥2.交换机上的每一个端口都可以分配给不同的VLAN3.默 ...

  2. f(n)=1-1/2+1/3-1/4...+1/n

    #include <stdio.h>//f(n)=1+1/1+1/2+1/3+...+1/n int main(){ int n,i; double sum=0.0; scanf(&quo ...

  3. Linux基础与搭建

    1 学习目标 了解Linux的简介与安装 掌握Linux常用的命令 掌握Linux系统上JDK.Mysql.Tomcat的安装 2  Linux简介 2.1 Unix简介 Unix是一个强大的多用户. ...

  4. ubuntu 14.04 如何设置静态ip

    有线网络: 1. 找到文件并作如下修改: sudo vim /etc/network/interfaces 修改如下部分: auto eth0iface eth0 inet staticaddress ...

  5. springcloud微服务feign组件报错

    今天在用springcloud搭建微服务时,利用feign做通讯组件,结果报错 java.lang.IllegalStateException: Failed to introspect Class ...

  6. 基于 Google-S2 的地理相册服务实现及应用

    马蜂窝技术原创内容,更多干货请关注公众号:mfwtech 随着智能手机存储容量的增大,以及相册备份技术的普及,我们可以随时随地用手机影像记录生活,在手机中存储几千张甚至上万张照片已经是很常见的事情.但 ...

  7. PaddleBook的部署安全性问题

    作为一个学习paddle的新手,按照官方流程全套走一波是很有必要的. 按照官方的推荐,首先得安装一个PaddleBook. 然而,我在自己vps上安装好后,输入 http://myvps:8888,直 ...

  8. Apache开启GZIP 压缩网页

    首先我们先了解Apache Gzip的相关资料. 一.gzip介绍 Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台.当应用Gzip压缩到一个纯文本文件时,效果是非常明显的 ...

  9. tomcat 访问权限设置

    1.全局设置,设置允许某些IP能够访问到tomcat服务器,或不能访问tomcat服务器 只需要编辑tomcat的server.xml,增加适当代码即可. 修改如下:在<Host>  &l ...

  10. CentOS7时区和时间设置

    [root@saltstack-master ~]# timedatectl set-timezone Asia/Shanghai [root@saltstack-master ~]# ln -sf ...