html - 如何将对象拉到 div 的左侧(类 "card")

Question

这就是我的

这就是我必须做的

我知道如何创建“悬停”，但不知道如何添加从卡片左侧拉出的数字!这是我的 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 counters + before pseudo element 来完成，如下所示:

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/