Застрял на обрезке спрайта CSS

Question

Недавно я реализовал CSS-спрайт на следующей веб-странице: (https://www.georgefox.edu/college-admissions/apply/transfer/index.html). (Если вы прокрутите вниз, вы увидите то, о чем я говорю, под заголовком «Процесс прост»). До обновления, которое былонедавно отправленный на нашу CMS, спрайт работал отлично. Хотя я мог откатить обновление, моему университету это не понравилось бы, так как мы обновили загрузчик и несколько других технологий.

Теперь спрайт показывает цифры налевая и правая стороны, когда это действительно должно просто показывать на левой стороне нормально. Я пытаюсь исправить это с помощью псевдоэлементов и классов, но мои попытки почти не привели к успеху. Я попытался использовать несколько селекторов фона в псевдоэлементах, таких как фонразмер, фоновое положение и т. д. Скриншот проблемы:

Большое спасибо за любую помощь, я действительно ценю это!

Answer 1

Я просто скопировал ваши HTML и CSS с вашего сайта и сделал несколько CSS изменений. Вы должны переместить css sprite image css из li в li:before тег, который решит вашу проблему.

Добавить ниже CSS для применения CSS-спрайта в li: before

.process-section ol li:before {
  background-image: url(http://www.georgefox.edu/college-admissions/apply/xtransfer-list-numbers.png.pagespeed.ic.NLZLYGEjg8.webp);
  background-repeat: no-repeat;
  content: '';
  height: 50px;
  width: 40px;
  display: block;
  position: absolute;
  left: 0;
  top: 12px;
}

Заменить ниже CSS в вашей таблице стилей

.process-section ol li.two:before {
    background-position: -750px 0;
}

.process-section ol li.three:before {
    background-position: -1500px 0;
}

.process-section ol li.four:before {
    background-position: -2250px 0;
}

.process-section ol li.five:before {
    background-position: -3000px 0;
}

.process-section ol li.six:before {
    background-position: -3750px 0;
}

.process-section ol li {    
    border-bottom: 1px solid #ddd;
    padding: 15px 0 20px 45px;    
    position: relative;
    list-style: none;
}

Удалить Background-position css для первого элемента, который нам не нужен.

.process-section ol li.one {
    background-position: 0 10px;
}

Удалите background: none из .process-section ol ul li и добавьте ниже CSS, чтобы скрыть :before от дочернего li.

.process-section ol ul li:before {
  display: none;
}

.p-2 {
    padding: 0.5rem !important;
}

.border {
    border: 1px solid #dee2e6 !important;
}

.process-section ol {
    padding-left: 0;
    margin: 0;
}

.process-section ol li.two:before {
    background-position: -750px 0;
}

.process-section ol li.three:before {
    background-position: -1500px 0;
}

.process-section ol li.four:before {
    background-position: -2250px 0;
}

.process-section ol li.five:before {
    background-position: -3000px 0;
}

.process-section ol li.six:before {
    background-position: -3750px 0;
}

.process-section ol li {    
    border-bottom: 1px solid #ddd;
    padding: 15px 0 20px 45px;    
    position: relative;
    list-style: none;
}

.process-section ol li:before {
  background-image: url(http://www.georgefox.edu/college-admissions/apply/xtransfer-list-numbers.png.pagespeed.ic.NLZLYGEjg8.webp);
  background-repeat: no-repeat;
  content: '';
  height: 50px;
  width: 40px;
  display: block;
  position: absolute;
  left: 0;
  top: 12px;
}

li {
    margin-bottom: 8px;
    line-height: 21px;
}

.process-section strong {
    font-family: TradeGothic;
    font-size: 20px;
}
b, strong {
    font-weight: bolder;
}

.process-section ol ul {
    margin-top: 10px;
    margin-bottom: 10px;
}

.process-section ol ul li {
    padding: 0;
    list-style: inherit;
    border: 0 none;
    margin-bottom: 2px;
}

.process-section ol ul li:before {
  display: none;
}

<div class="border p-2 process-section">
<ol>
<li class="one"><strong>Apply</strong>&nbsp; <br>A complete application includes:
<ul>
<li>Application form (available <a href="../index.html">online</a> or via the <a href="https://apply.commonapp.org/Login">Common Application</a>)</li>
<li>500-word personal statement</li>
<li>One letter of recommendation (from anyone who is not a family member)</li>
<li>Official college transcripts (from every school you’ve attended)</li>
</ul>
We are generally looking for a cumulative college GPA of 2.6 or better. We’ll call you personally soon after receiving your completed file with an admissions decision.</li>
<li class="two"><strong>File</strong>&nbsp; <br>We need your FAFSA information. You can submit this online at <a href="https://fafsa.ed.gov/">fafsa.ed.gov</a>.</li>
<li class="three"><strong>Review</strong>&nbsp; <br>Look over your financial aid package. After you’re admitted, we’ll use your FAFSA information to mail a financial aid award letter to you. We don’t have a due date for financial aid. As long as we are accepting applications for a semester, financial aid is available for students.</li>
<li class="four"><strong>Deposit</strong>&nbsp; <br>Submit your <a href="../../scholarships/enrollment-deposit.html">$300 enrollment deposit</a>. This secures your spot at George Fox.</li>
<li class="five"><strong>Register</strong>&nbsp; <br>Sign up for classes. All transfer students will register for classes at an event called <a href="../../visit/genesis.html">Transfer Genesis</a>. If you can’t make it, don’t worry. We’ll contact you and schedule an alternate registration appointment.</li>
<li class="six" style="border-bottom: 0;"><strong>Connect</strong>&nbsp; <br>If you have questions, don’t hesitate to contact us at <a href="tel:+15035542271">503-554-2271</a>.</li>
</ol>
</div>