Logo

TODAY I LEARNED

3 posts about #html-css

Change the starting point for your ordered lists.

Use the start attribute to change the starting point for your ordered lists.

<ol start="10">
  <li>Git</li>
  <li>Ruby</li>
  <li>JS</li>
  <li>PostgreSQL</li>
  <li>CSS</li>
  <li>HTML</li>
</ol>

Output:

10. Git
11. Ruby
12. JS
13. PostgreSQL
14. CSS
15. HTML

Learned by Victor Velazquez on Feb 28, 2021

973983 adforcodereview v3 0211021 c02 021121

Comma-Separated Lists

Separate list elements with commas but not the last one:

ul > li:not(:last-child)::after {
  content: ",";
}

Example

  • Hello,
  • There,
  • Comma

Source: AllThingsSmitty

Learned by Victor Velazquez on Feb 14, 2021

973983 adforcodereview v3 0211021 c02 021121

Styling broken links

<img src="http://bitsofco.de/broken.jpg" alt="Broken Image">
img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

See the Pen Styling Broken Images by Victor Velazquez (@vicmaster) on CodePen.

Original source: bitsofco.de

Learned by Victor Velazquez on Feb 13, 2021

973983 adforcodereview v3 0211021 c02 021121