Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have this bullet when using <li> tag with list-style: circle:
How can I change the border of the circle with css? Like this:
You cannot change the styling of that circle, but you can apply list-style: none; to the list to hide the list icon and add circle elements using li: before pseudo elements, having the settings as below or similar:
ul {
list-style: none;
}
li {
position: relative;
}
li:before {
position: absolute;
left: -1.2em;
bottom: 0.3em;
content: ' ';
display: block;
width: 0.45em;
height: 0.45em;
border: 2px solid lightblue;
border-radius: 50%;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have this:
<ul>
<li>bullet point</li>
<li>bullet point</li>
<li>bullet point</li>
</ul>
How can I achieve to add horizontales lines like this to it:
I used a combination of padding, ::before and background-gradient, where I put the black ::before element on top of the gray striped gradient. The positive effect of using background-gradient is that the number of stripes adapts to the content.
ul {
--spacing-half: 0.5rem;
list-style-type: none;
padding: 0px;
}
li {
padding-left: 3rem;
padding-bottom: 3rem;
position: relative;
}
li {
background: linear-gradient(to bottom,
transparent var(--spacing-half), transparent var(--spacing-half),
#cccccc var(--spacing-half), #cccccc calc(var(--spacing-half) + 3px),
transparent calc(var(--spacing-half) + 3px));
background-repeat: repeat-y;
background-size: 11px 1rem;
background-position: calc(var(--spacing-half) + 2px) 0px;
}
li::before {
content: '';
display: block;
position: absolute;
left: var(--spacing-half);
top: var(--spacing-half);
height: 3px;
width: 15px;
background-color: black;
}
<ul>
<li>bullet point</li>
<li>bullet point</li>
<li>bullet point</li>
</ul>
Something like this?
CSS originally from HTML list-style-type dash with modifications using Horizontal Line Extension
and Horizontal bar
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed>li {
text-indent: -5px;
}
ul.dashed>li:before {
content: "⎯ ";
text-indent: -5px;
}
ul.dashed>li.smaller:before {
content: "―";
text-indent: -5px;
}
<ul class="dashed">
<li>bullet point</li>
<li class="smaller"></li>
<li class="smaller"></li>
<li class="smaller"></li>
<li>bullet point</li>
<li class="smaller"></li>
<li class="smaller"></li>
<li class="smaller"></li>
<li>bullet point</li>
</ul>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am in HTML, and I'm making a header for my website. I have a website title, followed by some links to various pages. By default, they are right next to each other, and I want them to be apart. I've tried the simple option of just adding multiple spaces, but it puts it as just 1 space.
If they are separate links then you should put padding on the link or some margin
`Link text`
Please add your code here so that you will get more help at SO.
Is this what you are trying? See if this helps.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</body>
</html>
Here's the code and I test it. if you want to change the spacing between elements just change the padding of the li element
<style type="text/css">
* {
padding: 0;
margin: 0;
}
h1 {
float: left;
}
ul {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
li {
display: inline;
padding-left: 10px; // this is the space between elements you can add whatever you like
}
<h1>The website title</h1>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How can I do something like this:
It will be on :hover and :active states.
Here is some code to get started.
ul{
list-style: none;
background-color: coral;
}
li {
padding: 10px 20px;
display: inline-block;
position: relative;
}
li:hover:after{
content: "+";
position: absolute;
right: 2px;
bottom: 2px;
color: blue;
position: absolute;
font-weight: bold;
}
<div>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Mission</li>
<li>Vision</li>
</ul>
</div>
Note: Try to implement the requirement and then ask for help when necessary.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Here is my CodePen: http://codepen.io/ScottBeeson/pen/rxquJ
So basically when you hover over an entity, a menu slides up. I'm trying to create a submenu for each menu item that basically mirrors the menu functionality, but slides down from the bottom of the menu. Here is an image of what it should look like:
And here is my current HTML:
<div class="entity">
<span class="menu"><div>A</div><div>B</div><div>C</div></span>
</div>
I can think of a couple ways to do this with JQuery, but I'm wondering if it's possible to do with CSS. Obviously, populating the menu will be via javascript, but I'm trying to use CSS as much as possible. So to put it in question form: If I put a static div with a class of "submenu" inside my entity, is there any way with CSS/LESS to trigger it when I hover over a div inside the menu?
I don't use LESS, so I can't help you with that.
However, I made you this code, which displays the menu on hover, and the submenu when you hover the menu items. You could set up the structure for a entity like this:
<div class="entity">
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>C</li>
</ul>
</div>
And combine it with this CSS:
.entity {
margin: 5px;
position: relative;
display: inline-block;
width: 260px;
height: 200px;
background-color: lightblue;
}
.entity ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
background-color: rgb(0,0,0); /*fallback*/
background-color: rgba(0,0,0,.5);
bottom: 0px;
}
.entity li:hover {
background: black;
color: white;
}
.entity:hover > ul { /* only display direct ul child of .entity */
display: block;
}
.entity li {
display: inline-block;
padding: 10px;
}
.entity li > ul {
background: black;
}
.entity li:hover > ul {
display: block;
left: 0;
bottom: -100%;
}
I hope you can add the smooth effects yourself. Good luck.
Ow, and a DEMO
[EDIT]
Made a (bit sloppy though) animation using transitions, check the updated Fiddle.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I need to align my submenu to the left with some margin and remove the border from the right side... but if I remove it, the border in the menu is also removed and I don't want this...
<nav>
<ul class="fancyNav">
<li id="quemsomos" class="menlog"><img src="imgs/Logo.png" width="37" height="45" />
</li>
<li id="quemsomos"><font face="din" size="4">QUEM SOMOS</font>
<!--start of sub menu-->
<ul>
<li>link the zone 1
</li>
<li>link2
</li>
<li>l for example
</li>
</ul>
<!--end of sub menu-->
http://jsfiddle.net/RHCn7/2/
DEMO
#quemsomos ul {
padding: 0;
margin-left: 5px;
}
#quemsomos ul li {
border: none;
}
EDIT(answer to the request in the comment):
DEMO
#quemsomos ul li {
border: none;
width: 100%;
text-align: left;
}
Add padding
ul li ul {
display: block;
border: 0;
position: absolute;
background-color: #D5D5D7;
opacity: 1;
padding: 8px;
}
Check this : http://jsfiddle.net/RHCn7/6/