class: center, middle, inverse # Css ### extra .footnote[Mateu Yábar] --- # Css pseudo-classes ```css #box:hover { margin-left: 100px; } ``` ```html <div id="box">Hover me</div> ``` --- # Transitions ```css #box:hover { padding-left: 100px; transition: padding-left 5s; } ``` ``` #box:hover { padding-left: 100px; transition: 5s; } ``` --- # Css variables ```css :root { --main-bg-color: pink; } p { background-color: var(--main-bg-color); } ``` --- # Before and after ``` a::before { content: "🔗"; } ```