I would like to change the position of the arrow that appears in details. I've tried float:left but if the line is too big, like the one in the example above, the arrow moves on the start of the line underneath when I resize the window. I would like it to stay on besides the very first letter on the first row.
How can I do that?
Example:
<details>
<summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis.
</summary>
Content goes here.
</details>
<style>
summary::-webkit-details-marker {
display: none
}
summary:after {
content: "+";
color: #fff;
float: left;
}
details[open] summary:after {
content: "-";
}
</style>
use :before instead of :after
summary::-webkit-details-marker {
display: none
}
summary:before {
content: "+";
color: red;
float: left;
margin-right: 10px;
}
details[open] summary:before {
content: "-";
}
<details>
<summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis.
</summary>
Content goes here.
</details>
You can position the marker using absolute positioning
details {
width: 20em;
margin: auto;
}
summary {
position: relative;
padding-left: 1em;
}
summary::-webkit-details-marker {
color: red;
position: absolute;
left: -.5em;
}
<details>
<summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis.</summary>
Content goes here.
</details>
Related
A website use this spoiler code:
https://codepen.io/oloman/pen/odnqy
input[id^="spoiler"] {
display: none;
}
input[id^="spoiler"]+label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: #e1a;
color: #fff;
text-align: center;
font-size: 24px;
border-radius: 8px;
cursor: pointer;
transition: all .6s;
}
input[id^="spoiler"]:checked+label {
color: #333;
background: #ccc;
}
input[id^="spoiler"]~.spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
padding: 10px;
background: #eee;
border: 1px solid #000;
border-radius: 8px;
transition: all .6s;
}
input[id^="spoiler"]:checked+label+.spoiler {
height: auto;
opacity: 1;
padding: 10px;
}
<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler1</label>
<div class="spoiler">
Lorem ipsum dolor sit amet, Etiam congue, neque a commodo
</div>
<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler1</label>
<div class="spoiler">
Lorem ipsum dolor sit amet, Etiam congue, neque a commodo
</div>
This works, when only 1 spoiler is visible. If multiple spoilers are available, only the first one is working (opening), when someone click at the next buttons.
Is there a way to make this individual without javascript and only with css, maybe with hasChild? Its not possible to use different ID´s.
I made a jsFiddle:
https://jsfiddle.net/swj38nmr/
We can achieve this effect -without javascript- using the html element details and a css keyframe:
Simplest example:
details[open] summary ~ * {
animation: spoiler 1s ease-in-out;
padding: 2rem;
background: pink;
border-radius: 1rem
}
#keyframes spoiler {
0% {opacity: 0; background: red; border-radius: 3rem}
100% {opacity: 1; background: pink; border-radius: 1rem}
}
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
Behave well on mobile.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
I'm trying to code this hero treatment.
The title and paragraph text is contained to a grid that has a max-width of 1200px and auto left and right margins.
The top and bottom borders should come from the left edge, but stop at the end of the centered 1200px text box.
I've coded them as HRs thinking that may be more helpful to style.
<div class="hero">
<img src="https://via.placeholder.com/1600x800" alt="">
<div class="hero-text">
<hr>
<div class="contain-to-grid">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
</div>
<hr>
</div>
</div>
and here's my CSS (this is currently just making the HRs go full-width)
.hero {position: relative;}
.hero img {width: 100%; height: auto;}
.hero-text {position: absolute; bottom: 30px; width: 100%;}
.hero-text hr {border-color: #000; margin: 30px 0;}
.contain-to-grid {width: 100%; max-width: 1200px; margin: 0 auto;}
I'm stumped. Any ideas on how to code this? It does need to be responsive.
Just added '.inner' div and added css. Hope this help you.
.hero {
position: relative;
}
.hero img {
width: 100%;
height: auto;
}
.hero-text {
position: absolute;
bottom: 30px;
width: 100%;
}
.hero-text hr {
border-color: #000;
margin: 30px 0;
}
.contain-to-grid {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.inner {
float: left;
width: 100%;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
<div class="hero">
<img src="https://via.placeholder.com/1600x800" alt="">
<div class="hero-text">
<div class="contain-to-grid">
<div class="inner">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget
laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
</div>
</div>
</div>
</div>
I want to put spacing between these columns, and in the image I've circled the spots with a red pen.
Here's my code:
.help-icons {
width: 90%;
margin-left: 4rem;
& > div {
height: 5rem;
width: 10rem;
float: left;
margin-left: 30px;
}
}
.help-icons
.icon-one
span.wfs-pie-chart
p.dark-text Lorem ipsum dolor sit amet
p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.icon-two
span.wfs-user
p.dark-text Lorem ipsum dolor sit amet
p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
.icon-three
span.wfs-git-branch
p.dark-text Lorem ipsum dolor sit amet
p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
.icon-four
span.wfs-database
p.dark-text Lorem ipsum dolor sit amet
p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
.icon-five
span.wfs-trending-up
p.dark-text Lorem ipsum dolor sit amet
p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
.icon-six
span.wfs-cloud
p.dark-text Lorem ipsum dolor sit amet
p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.
I'm using Pug instead of HTML and Sass instead of CSS.
Thanks!
EDIT: Here's an image of what I want to do.
Here's a starter:
.help-icons {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
> div {
flex: 0 0 calc(33.33% - 10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
margin-bottom: 1rem;
padding: 1rem;
> span {
width: 4rem;
height: 4rem;
display: inline-block;
border-radius: 2rem;
color: white;
font-size: 2.4rem;
}
.dark-text {
font-size: 1.8rem;
}
}
}
Most importantly, don't use float for that layout or your boxes will start jumping around the moment they have different heights.
You might need to put some padding on
& > div {
What is the best or right way to vertically align small absolutely positioned ::before content so that its baseline lines up with the parent’s text?
In this snippet, I want the “XL” to have the same baseline as the “Lorem ipsum”. Just tweaking top: would be too fragile.
body {margin: 0 30px; position: relative}
p {background-color: lightblue}
p::before {content: "XL"; font-size: 75%; position: absolute; right: 100%; background-color: lightgray}
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</body>
Correct answer: use line-height and use em.
You've come across a classic example when you want to use the text baseline as transform-origin of your element. I recommend this reading to understand limitations.
Also, in your current solution you're relying on the width of the closest relatively positioned ancestor to move the :before. You don't really need that. You can safely leave it at it's current position (top left corner of parent) and simply move it 100% of its own width towards the left:
document.querySelector('input[type="range"]').addEventListener('input', function(){
document.body.style.fontSize = this.value + 'px'
})
body {
padding: 24px 0 0 1em;
font-size: 18px;
}
p {
margin-top: 0;
background-color: lightblue;
}
p::before {
content: "XL";
position: absolute;
transform: translateX(-100%);
background-color: lightgray;
font-size: 75%;
line-height: 1.75em;
}
input[type=range] {
width: 80vw;
left: 10vw;
top: 0;
position: absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
<input type="range" value="18" step=".01" min="10" max="84">
Initial answer (when I believed you simply want to align to bottom):
You need to give the parent position:relative; and child: bottom: 0:
body {padding: 0 30px; }
p {
background-color: lightblue;
position: relative
}
p::before {
content: "XL";
font-size: 75%;
position: absolute;
right: 100%;
background-color: lightgray;
bottom: 0;
}
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</body>
Out of scope: don't use margin on <body>. Use padding instead.
I would adjust the line-height
div {
margin: 0 30px;
position: relative
}
p {
background-color: lightblue
}
p::before {
content: "XL";
font-size: 75%;
position: absolute;
right: 100%;
background-color: lightgray;
line-height:1.75;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</div>
<div style="font-size:20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</div>
<div style="font-size:35px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</div>
I have a <ul> <li> and I require the use of display: inline-block;. This is required in order to "float" the li's whilst the last element is 100% wide of it's parent container and there could be any amount of li's (floating would mean the amount of li's is finite depending on the width of it's containing element). So the total width of the <ul> will be greater than the width of the viewport.
This is fine except I require the "floated" elements to multiline and I expect all elements which are not multi lined to be 100% height of the <ul>.
I can achieve what I want by setting the height of the <ul> in JS but this is something I really do not want to do.
Here is a JS fiddle.
http://jsfiddle.net/d5WBv/3/
Does anyone have a solution. I'm not sure if flexbox or display: table; can solve this but I cannot seem to get it to....
Thanks!
I guess, you mean that the li's all should have the same height?
If so, you could display them as table-cells:
ul {
display: table;
width: 100%;
}
li {
vertical-align: top;
display: table-cell;
padding: 10px;
margin: 0;
}
Also, check the updated fiddle.
I have a CSS solution for you, check out this Working Fiddle
DownSide: it requires to Double the ul li elements,
(one of them is for taking the real space in the document flow, (he don't render as we want but so will be hidden), and one of them is showed, on top of the other, with the display you want.
HTML:
<div class="Container">
<ul class="Hidden">
<li>This stays on one line</li>
<li>And this</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
</ul>
<ul class="Visible">
<li>This stays on one line</li>
<li>And this</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
</ul>
</div>
CSS:
*
{
padding: 0;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.Container
{
position: relative;
}
.Hidden
{
visibility: hidden;
}
.Visible
{
position: absolute;
top: 0;
height: 100%;
}
ul
{
white-space: nowrap;
background-color: #cccccc;
font-size: 0;
}
li
{
display: inline-block;
padding: 10px;
border-right: 1px solid red;
background-color: #2c2c2c;
text-align: center;
color: #fefefe;
white-space: normal;
vertical-align: top;
font-size: 16px;
height: 100%;
}
li:last-child
{
width: 100%;
border-right: 1px solid #2b2b2b;
}