CSS method for creating designs surrounding text

I'm working on styling a section of a website with a pattern running alongside certain pieces of text. I've included a screenshot taken from the PSD file to illustrate the issue I'm facing, with red arrows indicating the areas that are posing a challenge for me - .

Any suggestions on how to tackle this?

This is my starting point:

<div class="box">
        <h2>Some text here</h2>
    </div>

And here's the corresponding CSS:

.box {
      width:400px;
      height:200px;
      text-align:center;
      background:yellow;
    }

    h2:after,h2:before{
      content:"";
      border:5px double purple;
    }

You can view the fiddle here: http://jsfiddle.net/HerrLoop/g63LB/1/

Currently, you'll notice that the stripes are vertical instead of horizontal as shown in my initial screenshot.

htmlcss

Answer №1

Here's a solution that may not be perfect, but it gets the job done with some tweaks:

h2{
    display:inline-block;
    vertical-align:middle;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:50px;
    display:inline-block;
    vertical-align:middle;
}

Check out the code here!

Update:

This version is a bit more responsive, though there are still some issues at smaller sizes and certain proportions:

.box {
    width:50%;
    overflow:hidden;
}
h2{
    display:inline-block;
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:20%;
    display:inline-block;
    vertical-align:middle;
}

View the updated version here!

Answer №2

Take a look at the solution provided on this page:

Check out the quick demo:

h2{
    overflow-x: hidden;
    white-space: nowrap;
    text-align: center;
}
h2:before, h2:after {
    content: "";
    border: solid #000;
    border-width: 1px 0;
    height: 5px;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }

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

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

htmlcss

The size of the generated file from tailwind build is compact

I've been working with TailwindCSS and have followed the installation process outlined below. However, after completing the steps, I ended up with a tailwind.css file that only contains 369 lines. This seems to be fewer lines than what others have in ...

cssreactjsnpmtailwind-csscra

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

javascriptjqueryhtml

Switching website to mobile version when accessed on a handheld device

Although I'm sure this question has been asked before, I can't seem to find any information on it. I am interested in creating two versions of my website - one specifically for mobile displayed on a subdomain like m., and another version for desk ...

javascriptjqueryhtmlcssresponsive-design

AngularJS has the ability to handle the value of one input based on the value of another input

How can I ensure that if one input has a value, the other must also be filled in AngularJS? I'm looking for the best approach to handle this requirement in an angular way. Any suggestions? Below is my code: <div class="form-group recipe_item" ng ...

htmlangularjsinput

Is it achievable to use multi-level :not selectors in CSS / JS querySelector?

I have come across numerous tutorials explaining the use of multiple :not selectors on a single element. However, I have yet to find any examples of using :not selectors on different levels within a single CSS / JS querySelector path. For instance, conside ...

css

Automatically trigger a PHP reload/refresh based on user input

My website has a form that populates a table with data. Currently, after the user submits the data, they have to manually refresh the page in order to see the new data displayed. Is there a way to automatically refresh the table every time the user hits ...

phphtml

Tips for positioning a div to match the height of its parent div

How can I make a div stretch to the height of its parent using Bootstrap 3.0.2 without using a script? Check out the fiddle linked below. In this example, I want to stretch the blue container to match the height of the parent green container. View Fiddle ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How can I show the last li item in a ul element that extends beyond its parent container?

Chat App Development In my current project, I am developing a chat application using React. The app consists of a list (ul element) that displays messages through individual items (li elements). However, I have encountered an issue where the ul element st ...

javascripthtmlcssreactjs

AngularStrap offers a dynamic and responsive navbar collapsing animation feature that enhances user

I am attempting to replicate the collapsible Bootstrap responsive navbar using AngularStrap. Check out this plunker: <div class="navbar navbar-inverse"> <div class="container" bs-collapse start-collapsed="true"> <div class="navbar- ...

javascriptcssangularjstwitter-bootstrap-3angular-strap

Issues regarding the sizing of fonts on mobile devices

Struggling to create a responsive site that looks good on high dpi mobile devices? You're not alone. No matter how you adjust your h2 and p text sizes, they seem to be the same size when viewed in portrait mode on certain devices like the Galaxy S4. E ...

androidhtmlcss

Add a background color to a drop-down selection box on Mozilla

I am trying to add a background color to a select box. My code successfully adds the background color to the options in Chrome, but not in Mozilla. How can I apply the background color to the select box in Mozilla as well? https://i.sstatic.net/TYU6R.png ...

htmlcss

How to reveal hidden Div element at a specific index with Angular Material table

In my mat-table, there are several functionalities available: 1. The ability to add or remove rows 2. Adding data into a row using different controls such as combo-boxes, text boxes, etc. One of the controls is a text box labeled "Additional Information ...

htmlangulartypescriptangular-material

What is the best way to transfer table values to a modal in Django?

I am looking to transfer all the values from the specific row to the modal when the edit option is selected in the project. How can I achieve this? Here is the table body code: <tbody class="list form-check-all"> ...

pythonhtmldjangoinheritance

The three.js library is throwing an error because it is unable to access the 'geometry' property of an

function CreateNewSphere(x, z) { var sphereGeometry = new THREE.SphereBufferGeometry(10 * factor, 32, 32); var sphereMaterial = new THREE.MeshBasicMaterial({ color: SphereColor, wireframe: false }); var sphere = new THRE ...

javascripthtmlthree.js

Unable to display keyboard on HTML input form in webview

Can someone assist me with displaying and allowing the keyboard to show and input properly? In my simple app, I have a main screen with buttons. When a button is clicked, it opens a webview. One of the buttons opens a webview to an HTML page with an input ...

androidhtmlkeyboardwebview

Adjust the alignment of the final row in several div elements within a container

I am working with a container div that houses several nested divs. Here is the CSS code for the structure: .result-container { max-width: 650px; margin: 0 auto; background: blue; border: 1px solid; position: relative; text-align: center; } . ...

htmlcss

Trigger AJAX request upon selecting a value from the dropdown menu

I am in the process of creating a basic dropdown menu that is only visible to users on mobile devices when they visit our website. The main objective is to allow users to select a value and then have that value sent via AJAX. For desktop devices, I have s ...

javascriptjqueryhtmlajax

Tips for utilizing mysql_connect(...) on a web hosting platform

Recently, I signed up for a web hosting service and have just started learning PHP and MySQL. I came across this video tutorial https://www.youtube.com/watch?v=gvGb5Z0yMFY which demonstrates how to add a row to a table. In my MySQL database, I have a table ...

phphtmlmysql

Choose specific nodes using the XPath query language

I need help with an HTML snippet: <td> <span class="x-cell">something</span> <span class="y-cell">something</span> <span class="z-cell">something</span> A text <span ...

htmlxpath-1.0