如何将对象拉到 div(class "card") 的左侧

Question

这就是我的

这就是我必须做的

我知道如何创建 "hover" 但不知道如何添加这个被拉到卡片左侧 OUT 的数字！这是我的 html

            <li>
                <div uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.3"
                     class="uk-card uk-card-hover uk-card-small uk-card-body">
                    <h3 class="uk-card-title">HOW THE PRICE CALCULATED</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>
            </li>
            <li>
                <div uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.5"
                     class="uk-card uk-card-hover uk-card-small uk-card-body">
                    <h3 class="uk-card-title">HOW THE PRICE CALCULATED</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>
            </li>

顺便说一句，我正在使用名为 UIkit 3 的 css 框架，也许它能以某种方式提供帮助... 谢谢！

Answer 1

你必须做一些自定义 CSS，但它可以通过 CSS 计数器 + 在伪元素之前完成，像这样：

ol {
  list-style: none;
  counter-reset: mycounter;
  padding-left: 50px;
}

li {
  counter-increment: mycounter;
  position: relative;
}

li:hover {
  background-color: #efefef;
}

li::before {
  content: counter(mycounter);
  position: absolute;
  left: -30px;
  font-size: 72px;
}

li:hover::before {
  color: rgb(0,100,255);
  font-size: 96px;
  left: -40px;
  top: -5px;
}

它在 codepen 上（有更多样式使其更接近您的模型）：

https://codepen.io/jcatt/pen/jeOQaO?editors=1100

这是做这种事情的指南：

https://css-tricks.com/custom-list-number-styling/

如何将对象拉到 div(class "card") 的左侧

How to pull object to the left side out of the div(class "card")

html

css

getuikit