css3 标题左右横线

CSS3的标题左右横线功能是一种很实用的设计元素，它可以为网站的标题添加一些美观的效果。最基本的使用方法是利用CSS3的::before和::after伪元素来生成两条横线，然后使用position属性来控制它们的位置。

h1 {
    position: relative;
    text-align: center;
}
h1::before, h1::after {
    content: "";
    position: absolute;
    top: 50%;
    border-bottom: 1px solid #000;
}
h1::before {
    left: 0;
    width: 30%;
    transform: translateY(-50%);
}
h1::after {
    right: 0;
    width: 30%;
    transform: translateY(-50%);
}

上面的代码会将横线均分为左右两部分，并在标题的顶部生成一条1像素的黑色边框。如果你希望让横线的长度不同，可以通过调整width属性来实现。同样，如果你想改变横线的颜色，只需要将border-bottom的值设置为你想要的颜色即可。

此外，你还可以通过使用CSS3的动画效果来为标题添加一些鼠标悬停时的效果，让网站更加生动。下面的代码会在鼠标悬停时将横线颜色修改为红色，并让横线长度变粗：

h1::before:hover, h1::after:hover {
    border-bottom-color: red;
    border-bottom-width: 2px;
    width: 40%;
}
    

总的来说，标题左右横线是一种很实用的CSS3设计元素，它可以为网站的标题添加一些个性化的效果，让页面更加生动。希望通过这篇文章，你可以掌握它的基本使用方法，并通过它为自己的网站增添一些美观的元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！