css - 标题下方的CSS渐变线

我有此渐变线：hr { margin: 10px 0px; border: 0; height: 2px; background: #a60000; background-image: -webkit-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2); background-image: -moz-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2); background-image: -ms-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2); background-image: -o-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);}我想用相同的渐变线替换此CSS中的border-bottom：h2{ color: #000000; padding: 0em; font-size: 1.5em; margin: 4px 0 16px 0; font-weight: bold; border-bottom: 2px solid #a60000; }我尝试使用hr：after {，但是背景图片会显示在文本顶部，而不是文本下方的一行。我希望它在每次使用h2时出现。如查找帮助。 最佳答案 您尝试过::after吗？h2::after{ position:absolute; top:100%; left:0px; content:" "; width:100%; height:2px; background: #a60000; background-image: -webkit-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2); background-image: -moz-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2); background-image: -ms-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2); background-image: -o-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);}还添加：h2{ position:relative;}我为您创建了一个jsFiddle关于css - 标题下方的CSS渐变线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17329970/