Centered background position for CSS h2

Hey there! I've got this CSS code for my H2 heading:

.rightBox h2 {
    background: url(images/lineh2.png) 0px 0px no-repeat;
    border-top: 1px solid #e4e4e4;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 100;
    font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
    color: #00b4f0;
    display: block;
    padding: 10px 0px 0px 0px;
}

This code adds a line above the title that is 40x5px in size, positioned at 0px from the left. I want to center the title using text-align:center;, but I also want the line to be centered while remaining in the left corner, similar to this image:

https://i.sstatic.net/Os9g4.png

Thank you!

htmlcss

Answer №1

If you're looking to add a gradient background to a text element, you can achieve this by using a span element within the HTML:

h2 {
  font-size: 22px;
  font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
  color: #00b4f0;
  text-align:center;
  border-top: 1px solid #e4e4e4;
}
h2 span {
  padding: 10px 0px 0px 0px;
  display:inline-block;
  background:
    linear-gradient(currentColor,currentColor) top left/40px 5px no-repeat;
}
<h2><span>Some text</span></h2>

If changing the HTML structure is not an option and transparency isn't necessary, here's another approach:

h2 {
  font-size: 22px;
  font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
  color: #00b4f0;
  display:flex;
  line-height:45px;
  border-top: 1px solid #e4e4e4;
  background:
    linear-gradient(currentColor,currentColor) top left/50% 5px no-repeat;
}
h2::before,
h2::after{
  content:"";
  flex-grow:1;
  background:#fff;
}
<h2>Some text</h2>

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

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

javascriptjqueryhtmlcss

Having trouble getting a DIV to appear on top of another DIV containing an image

I need help with positioning an "InfoBox" above the main header image on my website. Despite trying z-indexes and adjusting position, I can't seem to get it right. If anyone has any suggestions, please share. Thank you! For reference, here is the HTM ...

csshtml

What is the best way to retrieve the URL from a specific HTML tag?

I am attempting to extract all URLs that have id='revSAR' from the provided HTML tag using a Python regex: <a id='revSAR' href='http://www.amazon.com/Altec-Lansing-inMotion-Mobile-Speaker/product-reviews/B000EDKP8U/ref=cm_cr_dp ...

pythonhtmlregexhtml-parsingpython-3.3

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

javascripthtmlcss

JavaScript validation for basic "select" isn't functioning as expected

I need assistance with my simple "select" validation using JavaScript. The issue I am facing is that when validating the "select" element, it does not display the select options to users after a validation error occurs. "The select option is not re-enabl ...

javascripthtmlvalidation

Angular animation will be triggered when the user clicks using ng-click

In my Angular project, I'm looking to implement an animation that will enlarge the size of an image. Below is the code snippet: <div class="card"> <div class="item images-parent"> <img src="img/carryout-icon.jpg" class="left-image" ...

cssangularjs

Replicate the ctrl+/- function through coding

While browsing with your browser, you have the ability to adjust the font size by using CTRL + + or CTRL + -. Is there a way to replicate this functionality through code, such as with JavaScript? I am looking to add buttons on my website that allow users ...

javascriptcss

Older versions of Firefox are unable to detect a link that has been registered by the Vue event handler

Here is the HTML code that I am working with: <button id="btncontinue" ref="btncontinue" v-on:click="oncontinueclick" v-show="continuevisible"> <i class="fa fa-arrow-alt-circle-right fa-2x continue-icon" v-show="continuevisible"></i> &l ...

javascripthtmlvue.jsfirefox

full-page graphics with dynamic transition

I have been experimenting with creating a smooth fade-in and fade-out transition between two pages that feature full-screen images. My current approach involves using the swup plugin. To display a new full-screen image on each page, I assign a class to ev ...

javascripthtmlcssimagecss-transitions

Troubleshooting CSS Animation Failure in Internet Explorer 11

My mouse over / mouse out animation works perfectly in Firefox and Chrome, but it's not functioning in IE. Can anyone suggest why this might be happening when it was working fine before? var actual = 1; var over = 0; var over2 = 0; function scrol ...

javascriptcsscss-animations

Issue with jQuery .hover() not functioning as expected

The issue I'm encountering is just as described in the title. The code functions correctly on all divs except for one! $(".complete-wrapper-1").hide(); var panelHH = $(".file-select-wrapper").innerHeight; $(".files-button").hover(function(){ $(" ...

javascriptjqueryhtmlcss

Modify the text or background shade of the Bootstrap date picker

I have successfully integrated the bootstrap date picker (view figure below) and it is functioning as expected. The code appears like this: <div class="input-group date"> <input name="departure" type="text" class="form-control" id="departure" ...

jquerycsshtmltwitter-bootstrap

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

javascriptjqueryhtmlcss

AngularJS Filter from "start to finish" in values

I have been searching everywhere for a solution to this problem, but haven't found one yet. Any help would be greatly appreciated. Angular: var app = angular.module('app', []); app.controller('theController', ['$scope', ...

htmlangularjsfilter

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

javascripthtmltypescriptnext.js

Is there a way to gradually reveal an element as I scroll to a specific position?

If the window top position is about 100px from the bottom, I want to create a fading in/out effect for the element overlay. Check out this image Any ideas on how to achieve this? .section-card{ position: relative; height: 500px; line-heigh ...

javascriptjqueryhtmlcss

CSS - fixed table headers

Check out my CodePen example here - Code In this demo, I have a table inside a container where the table is larger than the container. As you scroll horizontally, both the table and headers move accordingly. However, when scrolling vertically, I want th ...

htmlcss

The card-group is off-center within the column

I am facing a challenge with the alignment of 3 cards within a card-group that are contained in a div with the col class, which is wrapped by a div with the row class, all within a div with the container class. Currently, the cards are not centered. I hav ...

htmlcssbootstrap-4

JQuery mouseover event not triggering after modification of HTML

I'm dealing with an HTML table that looks like this: <div id="recommendation"> <table id="category_selected"> <tr> <td>1</td> </tr> </table> </div> and my jQuery code is like this: $ ...

jqueryhtmlmouseenter