CODEWITHSUNDEEP
htmlcss
Piyush-Ask Any Difference
Piyush-Ask Any Difference

Reputation: 4286

Adding style to h3 elements with css and without modifying html

I have a website and I want to give style to h2 elements on it: https://christmasgenius.com/10-winter-holidays-around-the-world-xmas-vacations/

I have an example website: https://www.educba.com/merger-vs-amalgamation/

If you see the first h3 heading named " Head To Head Comparison Between Merger vs Amalgamation (Infographics)"

I want the same style to be applied to my h2 tags. I saw the code and it has the following html which I don't want to add in my html as it will too much work for all the pages on my website.

<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>

My question is, can I achieve the same style on my h2 tags by just using CSS and provide some code for the same.

Upvotes: 0

Views: 5333

Answers (1)

sanoj lawrence
sanoj lawrence

Reputation: 993

Based on your Question i answered below, without changing or adding extra html code.

let me know for any further.

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>

Upvotes: 2

Related Questions