I've got a box full of social media content below:
1 | 2 | 3
Is there any way to shorten the vertical pipes "|" so they don't extend beyond the height of the div?
I've got a box full of social media content below:
1 | 2 | 3
Is there any way to shorten the vertical pipes "|" so they don't extend beyond the height of the div?
If you're looking to add a vertical pipe after your text, you can achieve this using the :after pseudo-element. Check out this example on jsfiddle: http://jsfiddle.net/mLycophq/2/.
The height of the pipe will match the text in your div, but you can adjust it by changing the font-size.
div{
height:20px;
background-color:red;
margin: 0 10px;
padding: 10px;
display: inline-block;
}
div:after{
content: "|";
color:black;
}
Alternatively, you can use the border property to create a similar effect:
div:after{
content: "";
color:black;
border-right:1px solid black;
font-size: 10px;
}
To achieve this effect, consider setting a smaller value for the line-height property.
li {
display: inline-block;
border-right: 1px solid #111;
padding: 0 8px;
line-height: 4px; /* Changing line-height here */
}
li:last-child {
border:none;
}
Please note:
1) This method may not be suitable if you have a fixed height requirement for your element.
2) It's important to remember that adjusting line-height also affects the overall height of the element based on text font-size, not just the spacing between lines.
Perhaps you could experiment with this solution: How to make the border length smaller than the div width?
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 50%;;
width : your width here /* or 100px */
border-bottom:1px solid magenta;
}
In case you are working with either an ordered list or unordered list, consider adjusting the padding of the ul and ol elements to be greater than the padding of the li items. I personally implemented this solution for a comparable issue and found it to be effective. Just ensure that you apply the border property to your li elements.
Currently, I am faced with the challenge of addressing this particular issue: The outer div ("container") is not allowing height:auto and instead conceals the entire content within the div - however, it is crucial for me that the outer div expands as it w ...
What could be the reason for 'Maroon 5' moving down to a second line? Despite adding extra characters and testing with an integer, the issue persists. <ul id="soundsLike"> <li>Foo Fighters</li> <li>Maroon 5</ ...
Hello everyone, I'm currently working on designing a mobile-friendly header menu with the bars positioned on the right side of the screen. The goal is to utilize JavaScript to allow users to click either an 'X' icon or the bars to open the m ...
So I'm working on a JavaScript project that involves creating a navigation bar with multiple lists. My goal is to use the last list element in the bar to control the visibility (opacity) of another element. So far, I have been using the following code ...
The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...
In my code, I created a function that dynamically adjusts the width of elements in a loop to match the widest element among them. // Function: Match width var _so20170704_match_width = function( item ) { var max_item_width = 0; item.each(function ...
In the footer section, the tags are displaying in blue color and I would like to remove the line under the li tags. If necessary, I can provide additional HTML or CSS code for reference. Below is the snippet of HTML and CSS related to the footer: My HTML ...
Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...
When the page loads, I have an empty array. Since there are no values stored in this array, I disabled the button using ng-disabled="array1.length==0". Now, on the page that opens up, there are four drop downs present. My goal is to enable the button once ...
I've been struggling to find a solution for my specific issue. I need to have a static row in a large table that will not sort or move, allowing for repeated headers. Can anyone offer assistance with this? $("#dataTable").tablesorter({ ...
Encountering a white screen when trying to submit my contact form with fields for Name, Email, Subject, and Message. I am looking to receive emails through my website. I have double-checked all variable names and everything seems to be correct. Since I am ...
I'm encountering difficulties with the margins on my website. It seems like margin-top isn't functioning properly in Firefox and IE, even though it is working correctly in Chrome and Opera. Despite trying various techniques and searching online f ...
My goal is to dynamically create a DOM button object with JavaScript, and it seems to be happening perfectly fine. However, I'm facing an issue where if I try to assign another JavaScript function to one of the buttons, the other script triggers itsel ...
Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...
I am working on a website where I want to add the active class only when a user clicks on the top menu. However, if the user chooses something from the sidebar menu, I also want to add an icon arrow next to it. Any ideas on how I can achieve this? Check o ...
Currently, I am utilising Angular routers. app.config(function($routeProvider) { $routeProvider .when('/comment/list', { templateUrl: 'commentList.htm', controller: 'mainController' }) }); ...
I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...
Currently, I am working on revamping the frontend of an app that was initially built with vanilla javascript and transitioning it to a React framework. However, I'm encountering some challenges with styling the HTML elements. Specifically, the textare ...
Working with Ionic 4, I encountered the need to dynamically change the side property of ion-menu. On larger screens, ion-menu is always visible or static, whereas on smaller screens, it remains hidden until the user clicks on the ion-menu-button. My goal i ...
I am in the process of setting up a contact form, and I have some valuable information saved within certain spans. Specifically, it's related to an ecommerce shopping basket. As the built-in checkout system is proving to be subpar, we are opting for a ...