developing both vertical and horizontal 'cross out'

I'm attempting to add a 'spacer' between buttons on my website using the word "or" with a vertical line centered above and below it. I've tried

HTML

<div class="footer-btn-wrap">
    <div class="decor"><a href="... </div>

    <div class="or">
       <div class="above"></div>
       <h4>or</h4>
       <div class="below"></div>
    </div>

    <div class="decor"><a href="... </div>
</div>

CSS

.or { // name of containing div}
.or .above { border: 1px left solid }
.or .below { border: 1px left solid }

but I'm having trouble getting them to be perfectly centered.

Visually, I want something like this between the buttons

Additionally, in mobile view I'd like the lines to go through horizontally (as the buttons will be stacked).

htmlcss

Answer №1

Is it necessary for them to have borders? An alternative could be using a thin div with a background color.

Link to the example

<div class="footer-btn-wrap">
    <div class="decor">
        <a href="..."></a>
    </div>

    <div class="or">
        <div class="above"></div>
        <h4>or</h4>
        <div class="below"></div>
    </div>

    <div class="or">
        <h4>or</h4>
        <div class="below"></div>
    </div>

    <div class="decor">
        <a href="..."></a>
    </div>
</div>

 

.footer-btn-wrap
{
    width: 120px;
    background-color: #aaccee;
    color: #abddf9;
    font-family: Calibri;
}

.or h4
{
    font-size: 24pt;
    text-decoration: none;
    display: block;
    width: 50px;
    margin: auto;
    text-align: center;
}

.or .above, .or .below
{
    height: 50px;
    width: 2px;
    background-color: #abddf9;
    margin: auto;
}

 

If you want to make it horizontal for mobile devices, consider changing your elements to inline-block and adjusting the spacer div's dimensions.

(The following example may need adjustments, but it demonstrates the concept)

Link to the modified version

.footer-btn-wrap
{
    background-color: #61b8df;
    color: #abddf9;
    font-family: Calibri;
    display: inline-block;
}

.or
{
    display:inline-block;
    height: 50px;
}

.or h4
{
    font-size: 24pt;
    text-decoration: none;
    display: inline-block;
    margin: 0 20px;

}

.or .above, .or .below
{
    display:inline-block;
    height: 2px;
    width: 50px;
    background-color: #abddf9;
    margin: auto;
    vertical-align: middle;
}

 

Answer №2

You have the option to utilize pseudo elements.

Here's an example in HTML:

<div class="or">
   <h4>or</h4>
</div>

To style it with CSS:

.or { 
   padding: 10px 50px;
   display: block;
   position: relative;
}

.or:before {
   content: '';
   position: absolute;
   top: 0;
   left: 55px;
   height: 30px;
   border-left: 1px solid #000; 
}

.or:after {
   content: '';
   position: absolute;
   top: 55px;
   left: 55px;
   height: 30px;
   border-left: 1px solid #000; 
}

Check out this basic demo: https://jsfiddle.net/f1u1tsjk/1/

Remember to adjust the css according to your needs.

For more information on working with Pseudo Elements, read this informative article: https://css-tricks.com/pseudo-element-roundup/

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

Step-by-step guide on replacing a visible div with a new div when a button is clicked

I have organized my website with links on the left sidebar and matching content in the right sidebar, structured within appropriate div elements. My goal is to display only one div at a time when a user clicks on one of the links located on the left side. ...

jqueryhtmlcss

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Tips for resolving a 403 error while utilizing selenium with Python

What is the solution to fixing a 403 error? I have noticed that when trying to access a certain website, I am able to browse for about 30 seconds before encountering a 403 error. This issue only started occurring today, and I find it strange because if m ...

pythonhtmlselenium

Dynamic HTML5 elements in constant motion

I'm interested in creating an HTML5 canvas that features bouncing circle and square elements that interact with each other, potentially spinning upon collision. The best example I've come across so far is located at this link. var canvas = docu ...

javascripthtmlhtml5-canvascollisiongravity

Tips for creating a dynamic curved SVG path

I'm looking to draw a black border only along the inside of this SVG. I've tried adding stroke and setting the stroke-width, but that applies the border to the entire SVG. Is there a way to limit the stroke to a certain point within the SVG? d ...

javascripthtmlsvgpath

Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve t ...

javascripthtmlcsstwitter-bootstrapmaterial-ui

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

What is the best method to add a background image to a short div element?

For instance, here is some example HTML code: <div id="container_background"> <div id="content"> <p> #container </p> </div> </div> This is the CSS code that applies to the above HTML ...

htmlcss

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript

Automatically Scrolling Div According to its Content

Struggling to figure out how to make a parent div automatically scroll based on its child's content. I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent. This is the HTML for the menu wra ...

htmlcssscrolloverflow

How to place a div with 100% width at the bottom of a float with a fixed width

Each day the same question seems to pop up, yet this particular issue has me stumped... My goal is a simple one - I aim to design a fixed width layout with 3 columns, while ensuring that the header and footer stretch across 100% of the screen. Everything ...

csshtml

Adding an HTML string to the head in Next.js

Every time I fetch data from an API, it returns an object with the property head: '<title>dummy title<title>' Despite trying different methods, I am unable to display this HTML string in the head tag. This is my code: <Head>{da ...

htmlreactjsnext.jsjsx

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

Click on the logo to return to the home page

Logo Link Causing Menu Alignment Issue After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyon ...

htmlcsshyperlink

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below: // CANVAS co ...

javascriptcsscanvas

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

Get your columns in order with Bootstrap4

I need to rearrange my 3 columns on desktop and mobile devices in different ways. Currently, my grid structure is set up like this: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md- ...

csstwitter-bootstrapbootstrap-4grid