I am trying to enclose a div with text inside in brackets. I want the entire text (the div) to be surrounded by brackets.
Here is an example of what I am looking for:
https://i.sstatic.net/k4QRF.png
I considered using border properties like top, bottom, right, and left but I couldn't figure out how to adjust the top and bottom spacing.
Does anyone have any suggestions?
To achieve a border on both sides of a div, you can create a single div element and utilize the :before and :after pseudo-elements in your CSS.
div {
width: 200px;
position: relative;
margin: 50px;
text-align: center;
padding: 10px;
}
div:before,
div:after {
content: '';
height: 100%;
width: 30px;
border: 1px solid black;
position: absolute;
top: 0;
left: -10px;
}
div:before {
border-right: 0;
}
div:after {
border-left: 0;
right: -10px;
left: auto;
}
span {
display: block;
transform: translateY(100%);
}<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, unde?</p>
<span>Lorem ipsum dolor sit.</span>
</div>Implement a pseudoelement in your CSS...
body {
background: black;
margin: 0;
}
.border-brackets {
background: black;
text-align: center;
padding: 2em;
color: white;
margin: 2em;
border: 1px solid white;
position: relative;
}
.border-brackets:before {
content: '';
position: absolute;
display: block;
background: black;
z-index: 1;
width: 80%;
left: 0;
right: 0;
top: -1px;
height: calc(100% + 2px);
margin: auto;
}
.border-brackets p {
position: relative;
z-index: 2;
}<div class="border-brackets">
<p>some text here some text here some text here some text here some text here some text here some text here </p>
</div>To achieve this effect, consider using pseudo elements:
.custom-design {
position: relative;
}
.custom-design:after,
.custom-design:before {
content: '';
display: block;
width: 50px;
/* specify length of top and bottom lines */
position: absolute;
top: 0;
bottom: 0;
border: 1px solid black;
z-index: -1;
}
.custom-design:after {
right: 0;
border-left: 0;
}
.custom-design:before {
left: 0;
border-right: 0;
}<div class="custom-design">
Include your content here...<br>
Include your content here...<br>
Include your content here...<br>
</div>Is there a significant distinction between using single or double quotes in JS and CSS? Does it depend on personal preference, or are there certain instances where one is preferred over the other? In W3Schools, they employ single quotes for url('&apo ...
I'm struggling to figure out how to activate the image hover effect when hovering over a button with an image inside, but not directly over the image itself. Here's what I have so far: <button type="button" class="btn btn-normal"><img s ...
Recently, I reached out for help on how to make my img clickable to display a textarea upon clicking. While I received the solution I needed, I now face a new challenge - figuring out how to make the textarea disappear when I click the img again. Each clic ...
Since discovering semantic-ui a few days ago, I've been impressed and have decided to switch my app from Bootstrap 3 to semantic-ui. I could use some assistance here. I'm attempting to split the body of the page into two parts. I would like the ...
I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the p ...
Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...
.container { background: tomato; width: 100px; display: flex; } .text-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-right { } <div class=container> <div class="text-left"> title title title ...
I am struggling to accurately describe my issue, making it difficult to find a solution. I have an array called tempData generated from a text file that I want to reference with variables of the same name as the strings in the array. var red = new Image ...
I am looking to display 6 divs on my website with a margin between them for aesthetics. In order to maintain the design when resizing the site, I had to specify widths for the columns. However, I am struggling to center all the cols effectively, despite tr ...
Encountering an issue with Safari where the background isn't scaling properly. It functions perfectly in Firefox, Chrome, and other browsers, but Safari is presenting a problem. Here's a link to the site: This issue occurs when the resolution is ...
Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...
Below is the table structure: <table id="mytable"> <tr> <td>name</td> <td> <a id="button1" class="button">link</a> </td> </tr> <tr> <td>name2</td> ...
I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...
Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...
Hey there! I'm new to Bootstrap and I'm facing an issue where I want to position a button element at the bottom of a card, even when the body text is minimal. However, no matter what I try, the button does not end up in the bottom right corner as ...
Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...
I've been grappling with this problem for the past day, and despite restarting from scratch multiple times, I can't seem to make a horizontal CSS flyout header function as intended. The dropdown section should expand to fit the content width (id ...
Working on a project, I decided to test the responsiveness of my CSS. Suddenly, my page underwent a style transformation, especially my navbar (built with Bootstrap) changed completely. Upon inspecting, I noticed that properties were coming from a less/nav ...
I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...
Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...