I am working on styling a span for a restaurant name that requires a unique border-bottom design. I want to divide the border into two sections without overlapping the text below, similar to the image shown here: https://i.sstatic.net/bPvwQ.jpg
Can anyone advise me on how to achieve the divided border effect seen next to "bar & lounge" in the provided link?
To achieve this effect, the most effective method is utilizing CSS pseudo elements :before and :after.
You have the option to enclose the text within a single
<span>spoon and fork</span>Subsequently, you can apply styles using :before and :after selectors
<p>Spoon and fork</p>
p {
display: inline-flex;
align-items: center;
}
p::before, p::after {
content: "";
width: 50px;
height: 3px;
background: red;
margin: 5px;
}
Give this a try:
h2{text-align:center}
.custom { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; }
.custom span { background:#fff; padding:0 10px; }<h2>OCEAN VIEW CAFE</h2>
<h2 class="custom"><span>Menu Specials</span></h2>To create a stylish design, you can utilize the before and after pseudo elements in CSS.
.block{
width:350px;
text-align:center;
margin:0px auto;}
.text,.text2{
position:relative;
display:block;
font-size:28px;
text-transform:uppercase;}
.text:before{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
right:0px;
width:45px;}
.text:after{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
left:0px;
width:45px;}<div class="block">
<span class="text2">Marina's restaurant</span><br/> <span class="text>sppon and fork</span></div>Currently, I am developing a simple application using web technologies like HTML, CSS, and jQuery Mobile. This app enables me to create goals and save them to a listview using the <li> element. Every <li> representing a goal will have an assoc ...
My AngularJS script with MVC architecture is causing some issues. I suspect that there might be errors in the connection between the model, view, and controller layers. JS: var myApp = angular.module("myApp", []); //App.js myApp.controller('MainCon ...
I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...
Working with my WYSIWYG editor (Summernote) has brought me so close to being able to send html-encoded emails with images. The only issue is that it uses CSS widths and heights rather than img width and height attributes. <?php $html = '<p>& ...
When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...
I just started learning PHP and I'm struggling with positioning my reCAPTCHA box within the form. It looks great before submission, but after submitting the form, everything shifts to the left while the results are still centered. Can anyone help me f ...
I am looking to export a specific div section as a PDF file. The div contains a mix of text, images, and charts. <div id="newdiv"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/ ...
I am puzzled by the fact that, despite resetting their properties, the width and height of both the input and select boxes are different (you can see for yourself on this fiddle): HTML <div class="myDiv"> <input class="myInput&q ...
I wanted to create a tool for my workplace as a learning project in html, CSS and JS. It's a timer that tracks how long I spend on tasks. Currently, I have the timer resetting itself but I'm facing an issue where the paused time is not being log ...
Here's the code I'm working with: * { font-size: 30px; } .day { color: gray; } .today { color: blue; } :not(.today) .date { color: orange; } <span class="day">Tuesday<span class="date"> • 4</span></span> &l ...
Is there a way to set a default value in an input field of HTML that is not editable, and then allow users to add additional text to it? For example, having 'AB' as the default and uneditable starting characters, followed by any numbers such as A ...
I'm currently facing a bit of confusion with my project. I am constrained by an existing framework and need to come up with a workaround. To simplify, I am tasked with populating a dropdown list based on the selected checkboxes. I have managed to get ...
Is it possible to center align text in a select drop down for all browsers? It appears centered in Firefox, but shifts to the left in Chrome and Safari. CSS: .challenge{ max-width: 850px; width: 98%; height: 50px; background: #ffffff; margin: 3 ...
In the game I'm developing, I want the ball to move in a random direction on the HTML canvas when it starts, but always with the same velocity. The current code I have is: vx = Math.floor(Math.random() * 20) vy = Math.floor(Math.random() * 20) Howev ...
After successfully configuring the featured-top and footer elements in my CSS, I encountered an issue with a persistent white line appearing between them. Despite inspecting the elements in Google Chrome, I couldn't identify the source of this problem ...
Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...
As a student who has been learning programming for about a month, I must admit that there may be many mistakes in my code. In developing a website, I have incorporated a chart from the ChartJs library. The chart consists of an outer circle representing ho ...
I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...
I am facing an issue with my ng-repeat in the view where I want to pass the object from the ng-repeat to a javascript function. However, when I attempt to display it on the console, it shows up as undefined. Below is the HTML code snippet: <!-- Panel ...
I am currently learning HTML, CSS, and JavaScript. I am in the process of building my very first website, but I have encountered a problem. I am struggling to change the background color within the container beneath the images to a specific color (#82b5cf) ...