Enhancing the appearance of h3 headings using CSS without changing the HTML code

I'm looking to add some style to the h2 elements on my website. Here is an example of a website where I like the styling:

Another reference site for comparison is:

If you look at the first h3 heading that reads "Head To Head Comparison Between Merger vs Amalgamation (Infographics)", I'd like to apply a similar style to my h2 tags. However, I don't want to manually input the HTML code provided in the example as it would be too tedious for all pages of 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 for my h2 tags solely through CSS? If so, could you provide some sample code for accomplishing this?

htmlcss

Answer №1

Thanks for asking your question. Below is my response without altering the existing html code.

If you need any additional information, feel free to reach out.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The placeholder text in the matInput field is not being displayed

As a newcomer to Angular, I am facing a challenge that has left me unable to find a solution. Below is the code snippet in question: <mat-form-field> <input matInput placeholder="ZIP" style="color:red;"> </mat-form-field& ...

javascriptangularcssangular-material

Adjusting Font Size for Buttons on Mobile Devices in HTML

I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...

htmlcss

Storing toggle values (on/off) in a PHP database for future reference

I'm trying to use toggle buttons to save responses in a database as 'yes' or 'no'. However, for some reason the only response I am receiving is 'on', even when I switch off the button. I've searched for solutions but ...

phpjqueryhtmlajax

Images within inline blocks appear to be extending beyond their containing div as though they are

When I check my website in various browsers such as Firefox, IE, Edge, and Safari, I noticed that the images in the "My Specialties" section of the left column are extending outside of the div instead of fitting within it. This problem also occurs in Chrom ...

javascriptjqueryhtmlcss

triangle as a backdrop

Looking for a unique design for your website background? How about a triangle split with black on one side and white on the other, like this image? I can't seem to find this online, so any help would be greatly appreciated. Is it possible to achieve t ...

htmlcsscolorsbackground

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

csslessexpressstylus

How can we style the <a> link once it has been downloaded?

Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...

javascripthtmlcssreactjs

Errors in AMP Validator

I have recently started working with next/amp and I am encountering some issues with the amp validator in dev mode. The errors that I am struggling to understand are as follows: An error related to CSS syntax in the 'style amp-custom' tag - show ...

htmlreactjsreact-reduxnext.jsamp-html

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

htmlcsshover

Creating a sleek and functional dashboard using HTML and leveraging the power of Bootstrap 4

I'm working on styling my HTML dashboard with Bootstrap 4. I want the text to be big and have minimal white space, but not too cluttered. <html> <head> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlcsstwitter-bootstrapbootstrap-4

elements with a display of inline-block and a fixed body width

My inline-block elements are setting the width of the page, but the header and footer tags are not taking up the full width. Why is this happening and how can I make them span the entire page width? Check out the example here Here's the HTML code: ...

htmlcss

Displaying images on hover that were not initially incorporated into the project

I am currently developing a website where the content is not controlled by me and the incoming content is unknown, making it impossible for me to store images. My goal is to display the referenced image when a specific class is hovered over. For example: ...

jqueryhtmlimageonhover

Crafting visually stunning interfaces with Material UI

I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...

cssreactjsmaterial-ui

Transforming HTML content in real-time using Express.js

I'm a little uncertain if I understand the concept of Express MVC correctly: If my goal is to create a single page application and dynamically modify the HTML, can Express assist me with this? Or will I only be able to work with static pages that req ...

htmlmodel-view-controllerexpress

Modify table row background color using PHP based on its position in the table with the use of a function

I am having trouble formatting my table to highlight different rows in distinct colors. The top row should be one color, the second row another, and the bottom two rows a different color each. This is to represent winners, teams getting promoted, and tho ...

phphtmlmysqlcss

What steps do I need to take in order to integrate an mpg video onto my

I am in need of embedding mpg (dvd compliant mpeg2) movie files onto my webpage. Unfortunately, I do not have the ability to convert these videos into any other format. This webpage is solely for personal use, so any solution would be greatly appreciated. ...

phpjavascripthtmlmpeg

Troubleshoot: Difficulty selecting elements in OnsenUI with jQuery or JavaScript - potential ons-template problem?

Just starting out with OnsenUI and I'm really liking the overall look and feel of it so far. Working with plain JS and a bit of jQuery. The problem I'm facing is that I can't seem to select anything (ID, Class etc.) using JS or jQuery while ...

jqueryhtmlcordovaonsen-uionsen-ui2

Issue with Font Requests in Browsers when Using Angular 10 and SCSS with @font-face

I have a project built with Angular 10 that utilizes SCSS for styling. In my _typography.scss file, I have defined some @font-face rules pointing to the font files located in the assets/fonts directory. However, when I run the application, the browser does ...

cssangularsassfonts

footer extending beyond the previous div's boundaries

Struggling with frontend development and creating a layout in html, css3, and bootstrap 4? I've managed to incorporate a subtle animation in the background (https://codepen.io/mohaiman/pen/MQqMyo) but now facing issues with overlap when adding a foote ...

htmlcssbootstrap-4

Having trouble changing the chosen selection in the material UI dropdown menu

I've encountered an issue with my material ui code for a select dropdown. It seems that the selected option is not updating properly within the dropdown. <FormControl variant="outlined" className={classes.formControl}> <InputLabel ref={ ...

javascripthtmlreactjsdrop-down-menumaterial-ui