Is there a way to add text to a border of an element while having transparency in the areas where the text and border meet?

https://i.sstatic.net/7WZSK.png

Take a look at the image displayed. I want to position the text on top of the border. How can I accomplish this using html/css? Are there any alternative methods?

.wrapper {
  width: 100%;
  background: black;
  border: 4px solid purple;
  padding: 1rem;
  color: #FFF;
}

.wrapper p {
  text-align: center;
}

h1 {
  text-align: center;
}

a {
  display: table;
  margin: 0 auto;
  color: #FFF;
}
<div class="wrapper">
  <h1>
    Lorem ipsum dolor sit amet
  </h1>
  <p>
    Lorem ipsum
  </p>
  <a href="">Button</a>
</div>

htmlcss

Answer №1

To achieve this effect, utilize the pseudo elements within the h1 tag for styling. Create a wrapper div that establishes borders on the left, right, and bottom, then implement the pseudo elements of h1 to add a top border.

.wrapper {
  height: 100px;
  margin: 0 auto;
  width: 80%;
  margin-top: 30px;
  box-sizing: border-box;
  border: 5px solid tomato;
  border-top: none;
  position: relative;
}

.wrapper h1 {
  position: absolute;
  top: -41px;
  display: block;
  text-align: center;
  width: 100%;
  overflow: hidden;
  font-size: 2em;
}

h1:before,
h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin-right:1em;
  margin-left:-50%;
  vertical-align: middle;
  border-bottom: 5px solid tomato;
}

h1:after {
  margin-right:-50%;
  margin-left:1em;
}

/*Demo Only*/

body{
background:url("https://i.imgur.com/fL3tbdj_d.webp?maxwidth=728&fidelity=grand") no-repeat;

background-size:100% 100%;
<div class="wrapper">
  <h1>
    TITLE HERE
  </h1>
</div>

<div class="wrapper">
  <h1>
    LONGER TITLE HERE
  </h1>
</div>

Answer №2

To adjust the layout, consider changing the positioning of your h1 to relative and repositioning it accordingly

.container p {
  position : relative;
  bottom : 30%;
 }

By setting the bottom property to 30%, the element will shift upwards by that percentage

Answer №3

Below is a straightforward example that might help you grasp the concept. I struggled with editing my own code, so I created this simple snippet:

body {
  background-color: lightgreen;
}

.cont {
  height: 120px;
  width: 400px;
  border: 2px solid black;
  position: relative;
  margin: 40px
}

.cont:before {
  content: "My Header title";
  width: 180px;
  /* border: 1px solid; */
  position: absolute;
  text-align: center;
  top: -10px;
  background-color: lightgreen;
  left: 50%;
  transform: translateX(-50%);
}
<div class="cont"></div>

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

Clicking a button causes the entire HTML body to shift

My current webpage setup is quite simple, featuring a drop-down menu that appears upon clicking a button. However, when the button is clicked, the drop-down menu suddenly shifts the entire contents of the page. I'm unsure of what's causing this i ...

jqueryhtmlcssbuttondrop-down-menu

Trigger the running of a python script by clicking a button

On my HTML page, there is a single button that is supposed to trigger the execution of a python script upon being clicked. The goal is to receive the result of the script and display it on the same HTML page. The process involves validating the return val ...

javascriptpythonhtmlajax

Switch the 360-degree images by clicking a button using Panolen.js

As a beginner in the world of html, css, and javascript, I am trying to create a webpage that displays 360 panorama images. My goal is to have the image change when a button is clicked - for example, clicking on button 1 will display image1, while clicking ...

javascripthtmlbutton

Ways to implement autoplaying videos that vanish upon completion

I am looking to have a video play automatically when someone visits my website, and then automatically transition to displaying only the logo of my company once the video is finished. Initially, I attempted using a simple video tag like this: <video w ...

javascripthtmljqueryhtml5-videoyoutube-iframe-api

Position the icon in the center using :before pseudo-element

I've been trying to center an icon both horizontally and vertically inside a link using :before, but so far I haven't been successful. Despite my numerous attempts, I can't figure out why the icon won't center. Here's my HTML: & ...

htmlcss

Performing a while loop to iterate through the data for the second

After spending hours on this code and consulting a friend, we are both stuck trying to find a solution. We are working on a script that displays reviews based on descending IDs pulled from a database. The script implements an endless scroll feature to el ...

phphtmlajaxwhile-loop

Creating new components within A-frame

I've been attempting to implement the bubble function into my scene to generate a sphere, but unfortunately nothing is showing up. Even when I try creating a sphere without using the bubble function, it still doesn't appear in the scene. func ...

javascripthtmlaframe

Jquery attribute not functioning correctly when setting the 'required' property for checkboxes

One of the challenges I am facing is trying to toggle a text box on a checkbox's click event. While I have achieved success in this aspect, my issue lies in changing the checkbox's required attribute as well. Below is the code that successfully ...

javascriptjqueryhtmlcsscheckbox

Update the background URL of a div element using an HTML tag

My question is about a CSS div with set dimensions and background that I want to change on hover. I am aware that this seems like a simple task, but what I really want to do is retrieve the background sources from within the HTML tag itself. For example: ...

javascripthtmlcss

Alignment of text to the right in a two-column div design

I'm trying to figure out the most effective way to have a block of text aligned on the left and another block of text aligned on the right within a div. Here is an image that illustrates how I want it to appear Initially, I considered using three se ...

csshtml

Iterate through each field with getElementsByName to retrieve values triggering the onChange event

I am working on a contact form that includes inputs, selectors and radio buttons. Doubt 1: I am trying to figure out how to retrieve the index of a field using the getElementsByName method with the onChange event. Would a For Loop be the appropriate solut ...

javascripthtmlforms

Display a div beside it when hovering over a specific part of the image

If I have an image that is 200px wide and 900px tall How can I make a div display alongside it when hovering over a specific section of the image? ...

javascriptjquerycss

Include the className attribute on the contents received from dangerouslySetInnerHTML

What is the best way to define the className attribute for a div that contains 'hello world'? <div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} /> One option is to set it on the outer div like this: &l ...

cssreactjsstyling

Fixing the error message "page attempting to load scripts from an unauthenticated source"

Can you help me troubleshoot an issue on my PHP page with ad scripts? I recently switched my site from HTTP to HTTPS and now the scripts are not appearing. Here is the error I found in the dev console: Failed to load resource: the server responded with ...

javascriptphperror-handlinghtml

Struggling to achieve evenly separated DIV's with this method

The other day, I encountered something completely new to me and decided to embark on a quest for answers. I had a menu with various items inside it, and I wanted these items to span the full width of their parent element. After trying out different soluti ...

htmlcss

How to Align Pictures in an Unordered List

I'm having trouble centering these images within the UL element. Despite researching solutions from other sources, I can't seem to apply them successfully in my specific case. Any assistance would be greatly appreciated. Thank you. JSFiddle: htt ...

htmlcss

javascript onload select the text in the textarea

Is there a way to have JavaScript automatically highlight the text inside a textarea when the page is loaded? ...

javascripthtml

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Hello, I have encountered an issue with some PHP code from OpenCart that is automatically inserting <br /> and commas "," into the addresses of all my customers in the order notification emails. This unintended addition is creating problems with the ...

phphtmlopencart

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

javascriptjqueryhtmlcss

Customize hover effects for MuiCheckbox

For some reason, my checkboxes are displaying a circle on hover that I want to remove. https://i.sstatic.net/62TLL.png I attempted to make overrides in MuiTheme: export const MUI_THEME = createMuiTheme({ overrides: { MuiCheckbox: { root: { ...

cssreactjsmaterial-ui