相关疑难解决方法(0)

我需要在我正在构建的网站上的每个h1-h6元素下添加一条水平线.我目前正在添加一个after元素:

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  color: #000;
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 800;
  color: #333;
  display: inline-block;
  position: relative;
  text-rendering: optimizeLegibility;
  font-family: $altfont;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width: 60px;
    height: 4px;
    background-color: $yellow;
  }
}

我还有一个小的jQuery函数,以确保after元素总是低于元素20px:

$(function () {
    $('h1, h2, h3, h4, h5, h6').each(function () {

            x = parseInt($(this).css('font-size'));
            $(this).css('line-height', (x + 20) + 'px');

    });
});

如果h1左侧有文本对齐,则此方法有效 - 当文本换行为2行或更多行时,after元素将显示在最后一行的第一个单词下.

问题是,如果文本居中对齐或右对齐,则after元素将显示在h1元素下,但不会显示在最后一行的第一个单词下.这是可以用JS/JQuery完成的吗？

这是一张发生了什么的照片.在第二个例子中,我希望黄色线显示在"Slice"一词下面.

我有一个 WordPress 主题，其列表格式如下，

<ul class="ozy-custom-list wpb_content_element ">\n <li>\n  <span class="oic oic-dot" style="color:#2f75aa"></span>\n  <span>Personalised Services</span>\n </li>\n <li>\n  <span class="oic oic-dot" style="color:#2f75aa">\n  </span><span>Complete support \xe2\x80\x93 from Port to Destination</span>\n </li>\n</ul>\n

第一个跨度用于项目符号，第二个跨度包含项目符号后面的文本。

现在，在第二个 li 元素的情况下，文本将转到下一行并位于项目符号下方。我想在第二行添加一些填充，这样它就不会在项目符号下方起作用。

这是一张显示正在发生的事情的图片，

我如何定位第二行（即“目的地”）？

我有这个CSS代码:

h1 {
    font-size:22px;
    color:#341C12;
    font-weight:normal;
    font-style:italic;
}
.h1color h1{
    color:#862E06;
}

和这个HTML代码

<h1>News <span class="h1color">&amp; events</span></h1> 

但它不起作用.我想要做的是将第一个h1文本设置为颜色#341C12,将另一个文本设置为#862E06,仅使用1个h1标签.

我有一个h1标签,代码看起来像那样

HTML

<h1>AwesoME</h1>

CSS

h1 {
color:#eee
}

h1:last-word {
color:#000
}

我只想改变h1 的最后两个字母.有可能使用javascript或jQuery