使用css向h3元素添加样式,而无需修改html

问题描述 投票:0回答:1

我有一个网站,我想为其上的h2元素赋予样式:https://christmasgenius.com/10-winter-holidays-around-the-world-xmas-vacations/

我有一个示例网站:https://www.educba.com/merger-vs-amalgamation/

如果您看到第一个h3标题为“合并与合并(图表)之间的正面对比”]

我希望将相同的样式应用于我的h2标签。我看到了代码,并且它具有以下html,我不想在html中添加它,因为它将对我网站上的所有页面都起作用。

<div class="hh-block"><div class="hh-left hh-m-0"><span>&nbsp;</span></div><div class="h-h-title hhright hh-next"><h3>Head To Head Comparison Between Merger vs Amalgamation (Infographics)</h3></div></div>

我的问题是,是否可以仅通过使用CSS在h2标签上实现相同的样式,并提供一些相同的代码。

html css
1个回答
1
投票

根据您在下面回答的问题,没有更改或添加额外的html代码。

让我进一步了解。

h3 {
  border-top: 2px solid #1375b0;
  width: 100%;
  float: none;
  display: flex;
}

h3::before {
  content: "";
  display: block;
  position: relative;
  top: 0px;
  left: 0;
  font-size: 36px;
  padding: 25px 35px;
  background-image: linear-gradient(to top, #429ce9 0, #1375b0 100%);
  color: #fff;
  float: left;
  line-height: 0;
  font-weight: 600;
  clip-path: polygon(0 -1%, 100% -1%, calc(100% - 35px) 100%, 0 100%);
}
<h3>Head To Head Comparison Between Merger vs Amalgamation (Infographics)</h3>
© www.soinside.com 2019 - 2024. All rights reserved.