html - 带有填充问题的目标突出显示

Question

我有这个带有目标荧光笔的 HTML。我不希望目标突出显示在容器之外。我知道这是因为 height: 150px 但没有它容器会撞到浏览器顶部窗口。我该如何解决这个问题？

/* offset target */
:target:before {
    content: " ";
    display: block;
    height: 150px; /* fixed header height*/
    margin-top: -150px; /* negative fixed header height */
    } 
    
/* animation */    
:target {
	animation-name: hght;
	animation-duration: 4s;
	}
@keyframes hght {
	0% 	{background: transparent;}
	10% {background: #fbfc76;}
	80% {background: transparent;}
  
/* others */
a {
  background-color: blue;
}
ul li{
  list-style: none;
  display: inline-block;
  margin: 10px;
  }
  ul{
  width: 100%;
  right: 0;
  background-color: rgba(0,255,0,.9);
  padding-top: 80px;
  padding-bottom: 10px;
  position: fixed;
  top: 0;
  }

<ul>
  <li><a href="#sun">Sun</a></li>
  <li><a href="#mercury">Mercury</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sint minima quas illum impedit! Sunt expedita perferendis voluptatum assumenda error, numquam accusantium, voluptatibus commodi tempora consectetur velit consequatur placeat fugit quod qui minus repellat sint, eveniet architecto necessitatibus vel! Nam in sequi pariatur quasi amet hic autem natus dolorum alias explicabo architecto, nostrum cum quibusdam error, sapiente dicta, ab totam voluptatem est fugiat. Culpa labore architecto, sunt placeat modi quis unde temporibus quod voluptate tempore optio corporis distinctio repellat ab aliquam et non accusantium impedit dolores expedita, in cumque illum dolorum. Tenetur doloribus eligendi asperiores voluptates tempore, amet eum quaerat voluptatem illo cupiditate fuga magni omnis accusamus necessitatibus at consequatur odio maiores autem consequuntur culpa, repellat corrupti, qui repellendus quisquam. Sed maiores quis, facilis ab. Facere libero minus magni totam, impedit nihil excepturi vero, quos aliquam quae cupiditate eligendi distinctio doloribus odio consequatur, rerum deleniti ipsa id ad culpa cum dolorem. Quas autem iure, voluptatem rerum explicabo id optio rem sunt quam vel quidem illo aliquid, labore, nisi, molestias a in perspiciatis! Beatae deserunt quia odit officiis, optio reprehenderit necessitatibus eius culpa eveniet magni, minus, accusamus temporibus, repudiandae. Sit fugit expedita quia minus, beatae laboriosam omnis. Quos voluptas minus unde?</p>

<h4>Sun</h4>
<p id="sun">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ducimus totam ipsa sint velit at sequi corporis ipsam voluptatum tenetur aut, dolorum, sapiente nihil! Laudantium blanditiis doloremque porro cumque, nemo facere, vero illo nesciunt non ab repellendus ad temporibus, quis, provident odio amet. Dolorem, laboriosam quas officia. Et cumque sint molestias quas provident nostrum, dignissimos pariatur voluptas aliquid, repellendus consectetur recusandae iusto, earum iure ducimus enim similique quibusdam autem natus! Incidunt, sunt illum error. Autem asperiores molestias iure, recusandae voluptas tenetur accusantium iste, molestiae provident quibusdam dolore facilis cupiditate rerum, cumque corporis alias maiores, est ab. Quae eaque veritatis quia quasi error a provident pariatur, rerum molestiae magnam expedita autem quidem! Perferendis aut beatae, cumque fugit natus quidem quia facere magni aperiam accusantium. Neque cumque quis vel aut quas ipsam numquam fugit possimus facere ut! Ut error voluptatibus neque doloribus consequuntur at voluptates! Eaque perspiciatis, quas, sit facere praesentium sapiente iure mollitia, dolor dolore earum hic odio vel rerum magni ullam excepturi culpa laborum eos repellendus possimus quisquam, deserunt. Tempora obcaecati eaque culpa placeat libero quisquam, odit nihil atque voluptatibus ex hic consequatur. Inventore earum facilis odit aperiam culpa, optio ad, rem illo dignissimos modi ipsa rerum aut perspiciatis deserunt nobis odio asperiores in temporibus obcaecati, delectus, excepturi quasi. Praesentium maiores eum, iure et quidem labore cumque doloribus accusamus sunt obcaecati dicta, blanditiis in, neque vero incidunt. Optio libero dolore, explicabo vero, doloremque harum, laudantium sed laboriosam iste sapiente molestiae debitis porro veritatis. Asperiores facilis et, repellat dignissimos cupiditate qui molestias quia perferendis, necessitatibus, aliquam quasi inventore minus, id pariatur omnis nam ullam excepturi reprehenderit maxime quaerat hic. Repudiandae quae, natus eaque possimus adipisci libero veritatis, modi enim blanditiis cumque sunt eum omnis iusto! Consequuntur, minima, doloribus! Sequi vel fuga, alias dolor aliquid blanditiis fugiat in ratione architecto, culpa, dolores.</p>

<h4>Mercury</h4>
<p id="mercury">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, cupiditate quos debitis non in suscipit exercitationem nemo nostrum. Voluptates esse, voluptas quae accusamus molestias obcaecati, explicabo animi ullam maxime hic perferendis qui laudantium delectus magnam dolores temporibus dolorum corporis! Cum omnis doloribus eius perspiciatis sit sed deleniti ea, illum quos obcaecati non veritatis, eligendi a doloremque iste ab saepe, vel quia fugit ipsa nam repellendus provident. Quisquam dolore nihil unde sequi. Soluta illum magnam nesciunt enim similique facere cupiditate, voluptatem quasi aperiam consectetur fuga necessitatibus itaque blanditiis nemo consequuntur ullam at non illo ea, nisi aliquid dolores excepturi tenetur? Possimus consequuntur earum sit accusamus nihil tenetur, aliquid quis ex, atque neque. Tempora, inventore ex expedita explicabo. Porro perspiciatis, in. Odio nulla repudiandae perspiciatis commodi, ut consequatur voluptatum distinctio laborum fugit eligendi vitae, provident ab optio accusamus, modi eius ducimus nostrum aut! Deserunt placeat quod nisi amet accusantium dolores soluta, unde modi beatae, at in! Repellat vel, velit placeat earum, tempora magnam. Ducimus expedita, illum, dolore saepe quae, impedit, quibusdam laudantium ab dicta optio reprehenderit. Esse voluptates numquam eius optio iusto aliquid necessitatibus iure, omnis eligendi rerum ipsa ratione officiis nobis id, aspernatur at ad, dicta odio laboriosam illo officia asperiores. Dolorum dolore omnis soluta, obcaecati, debitis laudantium earum eligendi molestias? Eos consequuntur laudantium recusandae molestiae voluptates quos eum ipsa facilis iusto ducimus ipsum, iste obcaecati est consectetur error hic, quas officia, omnis cumque minus molestias unde! Aut magnam dicta beatae dolorum atque architecto possimus, quo aliquid, vel dignissimos harum unde nisi dolor asperiores tempora voluptatem neque cumque officiis cum. Debitis nulla, eligendi sed molestiae deserunt optio earum tempore natus eaque aspernatur soluta quibusdam tenetur, adipisci architecto, aperiam recusandae, quasi cum atque ad! Perferendis ipsum temporibus, assumenda sapiente. Laboriosam voluptatem fugiat, cupiditate impedit perspiciatis, vel ipsam rem deserunt, provident eaque aliquid. Vero amet sapiente alias magni eaque blanditiis, excepturi aspernatur maiores impedit nostrum maxime autem eveniet iure sit temporibus voluptas vel reprehenderit distinctio, eligendi cumque consequatur optio deleniti corporis sunt. Eligendi magnam id iure eveniet necessitatibus sit deserunt ipsam animi iusto suscipit, tempore voluptates facilis aut pariatur enim inventore in. Exercitationem dolores esse impedit ullam unde, inventore ipsa quibusdam assumenda rem provident eos odit temporibus harum voluptates neque. Aut, nostrum quae. Asperiores nemo ipsum molestias neque, officia non omnis magnam quis maiores, atque cum sunt ab facere mollitia ex deserunt amet, molestiae. Tempora expedita alias aut omnis, est fuga corporis mollitia.</p>

当您单击链接时，标题应该可见，后面是段落。

因为 height: 150px; 和 margin-top: -150px;，突出显示的目标向外展开。

Answer 1

你应该定位标题而不是段落:)

  ul {
    width: 100%;
    right: 0;
    background-color: red;
    padding-top: 80px;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
  }
/* offset target */
h4::before {
    content: " ";
    display: block;
    height: 150px; /* fixed header height*/
    margin-top: -150px; /* negative fixed header height */
    visibility: hidden;
    } 
    
/* animation */    
:target {
	-webkit-animation-name: hght;
	-webkit-animation-duration: 4s;
	}
@-webkit-keyframes hght {
	0% 	{background: transparent;}
	10% {background: #fbfc76;}
	80% {background: transparent;}
  
/* others */
a {
  background-color: blue;
}
ul li{
  list-style: none;
  display: inline-block;
  margin: 10px;
  }

<ul>
  <li><a href="#sun">Sun</a></li>
  <li><a href="#mercury">Mercury</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sint minima quas illum impedit! Sunt expedita perferendis voluptatum assumenda error, numquam accusantium, voluptatibus commodi tempora consectetur velit consequatur placeat fugit quod qui minus repellat sint, eveniet architecto necessitatibus vel! Nam in sequi pariatur quasi amet hic autem natus dolorum alias explicabo architecto, nostrum cum quibusdam error, sapiente dicta, ab totam voluptatem est fugiat. Culpa labore architecto, sunt placeat modi quis unde temporibus quod voluptate tempore optio corporis distinctio repellat ab aliquam et non accusantium impedit dolores expedita, in cumque illum dolorum. Tenetur doloribus eligendi asperiores voluptates tempore, amet eum quaerat voluptatem illo cupiditate fuga magni omnis accusamus necessitatibus at consequatur odio maiores autem consequuntur culpa, repellat corrupti, qui repellendus quisquam. Sed maiores quis, facilis ab. Facere libero minus magni totam, impedit nihil excepturi vero, quos aliquam quae cupiditate eligendi distinctio doloribus odio consequatur, rerum deleniti ipsa id ad culpa cum dolorem. Quas autem iure, voluptatem rerum explicabo id optio rem sunt quam vel quidem illo aliquid, labore, nisi, molestias a in perspiciatis! Beatae deserunt quia odit officiis, optio reprehenderit necessitatibus eius culpa eveniet magni, minus, accusamus temporibus, repudiandae. Sit fugit expedita quia minus, beatae laboriosam omnis. Quos voluptas minus unde?</p>

<h4 id="sun">Sun</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ducimus totam ipsa sint velit at sequi corporis ipsam voluptatum tenetur aut, dolorum, sapiente nihil! Laudantium blanditiis doloremque porro cumque, nemo facere, vero illo nesciunt non ab repellendus ad temporibus, quis, provident odio amet. Dolorem, laboriosam quas officia. Et cumque sint molestias quas provident nostrum, dignissimos pariatur voluptas aliquid, repellendus consectetur recusandae iusto, earum iure ducimus enim similique quibusdam autem natus! Incidunt, sunt illum error. Autem asperiores molestias iure, recusandae voluptas tenetur accusantium iste, molestiae provident quibusdam dolore facilis cupiditate rerum, cumque corporis alias maiores, est ab. Quae eaque veritatis quia quasi error a provident pariatur, rerum molestiae magnam expedita autem quidem! Perferendis aut beatae, cumque fugit natus quidem quia facere magni aperiam accusantium. Neque cumque quis vel aut quas ipsam numquam fugit possimus facere ut! Ut error voluptatibus neque doloribus consequuntur at voluptates! Eaque perspiciatis, quas, sit facere praesentium sapiente iure mollitia, dolor dolore earum hic odio vel rerum magni ullam excepturi culpa laborum eos repellendus possimus quisquam, deserunt. Tempora obcaecati eaque culpa placeat libero quisquam, odit nihil atque voluptatibus ex hic consequatur. Inventore earum facilis odit aperiam culpa, optio ad, rem illo dignissimos modi ipsa rerum aut perspiciatis deserunt nobis odio asperiores in temporibus obcaecati, delectus, excepturi quasi. Praesentium maiores eum, iure et quidem labore cumque doloribus accusamus sunt obcaecati dicta, blanditiis in, neque vero incidunt. Optio libero dolore, explicabo vero, doloremque harum, laudantium sed laboriosam iste sapiente molestiae debitis porro veritatis. Asperiores facilis et, repellat dignissimos cupiditate qui molestias quia perferendis, necessitatibus, aliquam quasi inventore minus, id pariatur omnis nam ullam excepturi reprehenderit maxime quaerat hic. Repudiandae quae, natus eaque possimus adipisci libero veritatis, modi enim blanditiis cumque sunt eum omnis iusto! Consequuntur, minima, doloribus! Sequi vel fuga, alias dolor aliquid blanditiis fugiat in ratione architecto, culpa, dolores.</p>

<h4 id="mercury">Mercury</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae amet fugit, facere doloremque nemo, assumenda id corrupti, illo culpa laboriosam dolorum et explicabo omnis libero dicta placeat mollitia expedita nisi est. Impedit repellat sed ducimus dolore assumenda consectetur nobis? Illo vero, eos ratione deleniti suscipit officia excepturi numquam error. Consectetur dolorem, nostrum cum. Mollitia maxime vero ab, possimus accusamus tenetur nisi soluta. Tempore, nam eius necessitatibus molestiae quos dolor explicabo suscipit nesciunt beatae rem eaque modi, in accusantium error ex, placeat praesentium voluptate. Ea esse, debitis! Doloribus aspernatur ea possimus nemo tenetur officiis, vero explicabo porro magni illo! Maxime harum, ullam vel nemo praesentium adipisci laboriosam ad hic, provident non, impedit dolorem enim illum cupiditate ipsum tempora. Beatae fugit ratione cum hic numquam saepe magnam perferendis impedit optio exercitationem molestiae ducimus, aspernatur, ea obcaecati nisi quas veritatis voluptatum. Autem quae debitis nostrum consequatur. Nobis necessitatibus aliquam nisi, iste voluptates eligendi nihil libero cumque. Quibusdam iusto, ab distinctio aspernatur ea minima voluptatem autem ipsam maxime natus. Esse praesentium, laboriosam, adipisci voluptate et impedit expedita reprehenderit voluptatem suscipit cum delectus quam. Velit corrupti tenetur eum explicabo itaque delectus incidunt nulla? At sed enim veritatis. Eius corrupti explicabo quis enim modi illum voluptate laborum iure cupiditate ut fugiat numquam facere nostrum quia libero sunt asperiores, alias repellat, unde ducimus minima possimus. Neque mollitia odio eaque ipsum expedita impedit adipisci labore recusandae, doloremque nisi veniam, illo esse odit maiores deleniti perspiciatis dolore similique! Dicta similique itaque porro praesentium, voluptas nam sed ex dolore voluptatum nobis perferendis, dignissimos, iure doloremque, aut est libero neque maxime veritatis harum consequuntur explicabo delectus tenetur qui. Quam harum nesciunt debitis libero molestiae eius aliquid et tempore, magnam, odit animi itaque. Fugit, non assumenda expedita maxime aut earum molestias dolorem eveniet perferendis quisquam placeat adipisci, cum, nam, fuga quod. Placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, cupiditate quos debitis non in suscipit exercitationem nemo nostrum. Voluptates esse, voluptas quae accusamus molestias obcaecati, explicabo animi ullam maxime hic perferendis qui laudantium delectus magnam dolores temporibus dolorum corporis! Cum omnis doloribus eius perspiciatis sit sed deleniti ea, illum quos obcaecati non veritatis, eligendi a doloremque iste ab saepe, vel quia fugit ipsa nam repellendus provident. Quisquam dolore nihil unde sequi. Soluta illum magnam nesciunt enim similique facere cupiditate, voluptatem quasi aperiam consectetur fuga necessitatibus itaque blanditiis nemo consequuntur ullam at non illo ea, nisi aliquid dolores excepturi tenetur? Possimus consequuntur earum sit accusamus nihil tenetur, aliquid quis ex, atque neque. Tempora, inventore ex expedita explicabo. Porro perspiciatis, in. Odio nulla repudiandae perspiciatis commodi, ut consequatur voluptatum distinctio laborum fugit eligendi vitae, provident ab optio accusamus, modi eius ducimus nostrum aut! Deserunt placeat quod nisi amet accusantium dolores soluta, unde modi beatae, at in! Repellat vel, velit placeat earum, tempora magnam. Ducimus expedita, illum, dolore saepe quae, impedit, quibusdam laudantium ab dicta optio reprehenderit. Esse voluptates numquam eius optio iusto aliquid necessitatibus iure, omnis eligendi rerum ipsa ratione officiis nobis id, aspernatur at ad, dicta odio laboriosam illo officia asperiores. Dolorum dolore omnis soluta, obcaecati, debitis laudantium earum eligendi molestias? Eos consequuntur laudantium recusandae molestiae voluptates quos eum ipsa facilis iusto ducimus ipsum, iste obcaecati est consectetur error hic, quas officia, omnis cumque minus molestias unde! Aut magnam dicta beatae dolorum atque architecto possimus, quo aliquid, vel dignissimos harum unde nisi dolor asperiores tempora voluptatem neque cumque officiis cum. Debitis nulla, eligendi sed molestiae deserunt optio earum tempore natus eaque aspernatur soluta quibusdam tenetur, adipisci architecto, aperiam recusandae, quasi cum atque ad! Perferendis ipsum temporibus, assumenda sapiente. Laboriosam voluptatem fugiat, cupiditate impedit perspiciatis, vel ipsam rem deserunt, provident eaque aliquid. Vero amet sapiente alias magni eaque blanditiis, excepturi aspernatur maiores impedit nostrum maxime autem eveniet iure sit temporibus voluptas vel reprehenderit distinctio, eligendi cumque consequatur optio deleniti corporis sunt. Eligendi magnam id iure eveniet necessitatibus sit deserunt ipsam animi iusto suscipit, tempore voluptates facilis aut pariatur enim inventore in. Exercitationem dolores esse impedit ullam unde, inventore ipsa quibusdam assumenda rem provident eos odit temporibus harum voluptates neque. Aut, nostrum quae. Asperiores nemo ipsum molestias neque, officia non omnis magnam quis maiores, atque cum sunt ab facere mollitia ex deserunt amet, molestiae. Tempora expedita alias aut omnis, est fuga corporis mollitia.</p>

Link to fiddle

编辑:要突出显示 p 标签，请使用:

h4:target + p {
  animation-name: hght;
  animation-duration: 4s;
}