'OR' separated by the <hr> tag

This particular code functions correctly on the Firefox and Chrome browsers. However, there seems to be an issue with IE and Opera, where the 'OR' text is only visible within a 2px height area.

hr {
  height: 2px;
  border: 0;
  background-color: #444;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
  content: 'OR';
  color:#ccc;
  display:block;
  text-align:center;
  background-color:#222;
  width:60px;
  margin:-10px auto 0 auto;
}

The background should be set as #222222.

In HTML, simply use <hr>.

Do you have any suggestions on how to fix this for IE and Opera?

Thank you

---UPDATE---[SOLVED]---------------------------------------------

To resolve the issue, position:absolute; left:50%; & transform: translate(-50%); need to be added.

hr {
    height:2px;
    border:0;
    background-color: #444;
    line-height:20px;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
    content: 'OR';
    color:#ccc;
    display:block;
    text-align:center;
    background-color:#222;
    width:60px;
    margin-top:-10px;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);  
}

Thank you

htmlcss

Answer №1

It is necessary to include position:absolute; left:50%; and transform: translate(-50%);

hr {
    height:2px;
    border:0;
    background-color: #444;
    line-height:20px;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
    content: 'OR';
    color:#ccc;
    display:block;
    text-align:center;
    background-color:#222;
    width:60px;
    margin-top:-10px;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);  
}

Answer №2

While I see where you're coming from with your example, there's actually a more effective way to center text. Instead of using the <hr> tag, try replacing it with this code snippet:

<form>
    <fieldset>
      <legend>MY FORM</legend>
      Name: <input type="text"><br>
      Email: <input type="text><br>
      Date of birth: <input type="text>
     </fieldset>  
</form>

The use of <fieldset> and <legend> tags will help center the text on the line effectively.

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

Having difficulty achieving the hover transition effect

I've been working on a navbar design and I'm having trouble getting the hover effect to work on the links. Specifically, I am trying to add a transform property to the after element of the links but it doesn't seem to be taking effect. #navb ...

htmlcsshover

Deactivate the rest of the buttons by utilizing the e.target.id

I have ten expansion panels. When I click a button in one expansion panel, I want to disable other buttons in the remaining expansion panels. The issue is that when I try to target an id, it does not return e.target.id but instead returns as the value pass ...

javascripthtmlreactjsreduxmaterial-ui

My goal is to develop a table that is both able to be resized and easily repositioned

I've been working on a project to develop an interactive table that can be manipulated, resized, and repositioned within a canvas. The code snippet below shows my attempt at creating this table on the canvas: var canvas = document.getElementById("dra ...

javascripthtmlcanvas

The CSS property for restricting white-space to nowrap is not functioning as

Having a div with multiple child divs floating left can be tricky. To prevent them from breaking, setting them to display:inline-block and white-space:nowrap seems like the solution. However, in some cases this may not work as expected. If your goal is to ...

htmlcssoverflowwhitespace

Is there a way to create a flexbox that combines a centered fixed child with a fixed child at the bottom?

I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...

htmlcsslayoutflexbox

Restrict Bootstrap Column Width to Container Boundary

I am struggling to create a two-row hierarchy display for a set of photos using bootstrap 5. Despite my efforts, the images overflow out of the container instead of staying within it. My goal is to make the container fill the screen and act as a cover disp ...

htmlcssbootstrap-5

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

javascriptcssreactjs

Some pages are receiving images from the CDN, while others are not

I am encountering some challenges while troubleshooting an issue on a website. The CDN (content delivery network) is functioning properly on some pages but not on others. Initially, I suspected a typo in the path, but that does not seem to be the case. F ...

htmlcontent-management-systemcdnimage-optimization

Unexpected Placement of CSS Grid Items

I am currently facing an issue with aligning items in a nested grid using grid-column/grid-row assignment. After setting the template with grid-template-rows:/grid-template-columns, I expected the $50 and Give Now items to appear on row 3, with one in colu ...

cssgrid-layoutcss-grid

Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...

htmlcss

Custom scrollbar designed for optimal viewing on various devices

I'm currently using perfect-scrollbar to customize the scrollbar in my application. However, I've encountered a situation where I need to set the height of the scrollable section in terms of a percentage. When I tried to do this by setting the he ...

jqueryhtmlperfect-scrollbar

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

javascriptjqueryhtmljquery-ui

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

html carousel not updating in popover

I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...

javascripthtmljquerycarouselbootstrap-5

Delete the "img" and "a" elements from the content within the specified node

Is it possible to only extract text from my HTML content? var sb = new StringBuilder(); doc.LoadHtml(inputHTml); foreach (var node in Doc.DocumentNode.ChildNodes) { if (node.Name == "strong" || node.Name == "#text" || node.Name == "br" || no ...

c#htmlhtml-agility-pack

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

htmlcssinput

difficulty with displaying the following image using jquery

I have referenced this site http://jsfiddle.net/8FMsH/1/ //html $(".rightArrow").on('click',function(){ imageClicked.closest('.images .os').next().find('img').trigger('click'); }); However, the code is not working ...

javascriptjquerycsshtml

Having trouble with the functionality of the cascading menu?

I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you. javascript <script type="text/javascript"> $(document).ready( ...

javascriptjqueryhtmlcss

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

jquerycss

What is the best way to utilize JSONP to display an entire HTML code with an alert?

When I attempt to use cross-domain ajax to retrieve the entire HTML page code, I keep receiving a failed message. The console log shows: "Uncaught SyntaxError: Unexpected token <" Below is my AJAX function: function fetchData(){ var url = documen ...

javascriptphphtmlajaxjsp